如何使Bootstrap彈出窗口在頁面加載后出現一次

Question

我想使引導程序彈出窗口出現在頁面加載一次按鈕上（僅用作指示），單擊按鈕后應該銷毀。

我想在按鈕上彈出按鈕，並在每次訪問我的頁面時吸引用戶的注意力，如果是新訪問者，請拖動用戶的注意力以單擊它。

我做了以下代碼，彈出窗口出現在頁面加載中，但是它的工作原理與普通的彈出窗口一樣，之后單擊按鈕時也不會被破壞。

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

$(function() { 

    $("#example").popover('show');

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

Answer 2

對於Bootstrap 4，目前這是擺脫它的方法：

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

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

在這里查看文檔

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();