Question

我想在页面加载按钮时出现一次bootstrap popover（只是将其用作指令），点击按钮后它应该被销毁。

我想在按钮上弹出按钮并在每次访问我的页面时引起用户的注意，如果他们是新访问者，请将注意力集中在点击它上。

我已经制作了以下代码，弹出窗口出现在页面加载但它的工作方式与正常的弹出窗口一样，之后单击按钮时它不会被破坏。

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h1>Hello World</h1>

            <p>Click on button to see Popover</p>

            <button type="button" id="example" class="btn btn-primary" rel="popover"
                data-content="Check this new option when you visit our website to catch the latest news!"
                data-original-title="This is new feature">pop
            </button>                      
        </div>
    </div>
</div>

JS：

function destroyNew(){
    $('#example').popover('destroy');
}

$(window).load(function () {
    $("#example").popover('show');
});

我也修改了JS并尝试过这种方式：

JS：

$("#example").on('click', function () {
        $('#example').popover('destroy');
    }
});

$(window).load(function () {
        $("#example").popover('show');
});

上面的代码根本没有弹出窗口，而不是正常加载页面。

我希望有一些专家帮助我，提前谢谢。

Answer 1

这对我有用。稍后您可以在点击后隐藏它。您可以查看jsfiddle here

#define do_div(n,base)  do{             \
    uint32_t __base = (base);           \
    uint32_t __rem;                 \
    (void)(((typeof((n)) *)0) == ((uint64_t *)0));   \
    if (((n) >> 32) == 0) {         \
        __rem = (uint32_t)(n) % __base;     \
        (n) = (uint32_t)(n) / __base;       \
    } else                      \
        __rem = __div64_32(&(n), __base);   \
    __rem;                      \
 }while(0)
/* Wrapper for do_div(). Doesn't modify dividend and returns
 * the result, not reminder.
 */
static inline uint64_t lldiv(uint64_t dividend, uint32_t divisor)
{
    uint64_t __res = dividend;
    do_div(__res, divisor);
    return(__res);
}

Answer 2

对于Bootstrap 4，这是目前如何摆脱它：

$(function() { 
    $("#element").popover('show');

    $("#element").on('click', function () {
        $("#element").popover('dispose'); 
    });
 });

请参阅文档here

Answer 3

您可以使用Cookie。在模态中添加一个复选框。我用我的项目。尝试？

$('#ppvr_dontshowagainmodal').change(function() {
if($('#ppvr_dontshowagainmodal').prop('checked') == true){
document.cookie="ppvr_dontshowagainmodal=1; expires=Thu, 18 Dec 2016 12:00:00 UTC";
}
else{
document.cookie="ppvr_dontshowagainmodal=0; expires=Thu, 18 Dec 2016 12:00:00 UTC";
}

});
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

function showModal()
{
if(getCookie("ppvr_dontshowagainmodal") !== "1"){
      $('#myModal').modal('show')
}
}
window.onload = showModal();

如何在页面加载时出现一次Bootstrap popover

3 个答案: