Javascript 如何使引导弹出框在页面加载时显示一次

我想让bootstrap popover在页面上出现一次，通过一个按钮加载（只是作为一个指令使用），点击按钮后应该会被销毁

我想在用户每次访问我的页面时弹出该按钮并吸引他们的注意力，如果他们是新访问者，则拖动他们的注意力以单击该页面。

我做了下面的代码，弹出框出现在页面加载上，但它的工作原理和普通的弹出框一样，当我点击按钮时，它不会被破坏

HTML:

我还修改了JS并尝试了以下方法：

JS:

上面的代码根本不会使popover，也不会在页面上正常加载

---

我需要一些专家来帮助我，提前谢谢。

这对我很有用。稍后，您可以在单击后将其隐藏。你可以查一下

---

你可以用饼干。在模式中添加复选框。我正在用我的电脑做一个项目。试试看

$('#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();

$（'ppvr_dontshowagainmodal'）。更改（函数（）{
if（$（'#ppvr_dontshowagainmodal'）.prop（'checked'）==true）{
document.cookie=“ppvr_dontshowagainmodal=1；expires=Thu，2016年12月18日12:00:00 UTC”；
}
否则{
document.cookie=“ppvr_dontshowagainmodal=0；expires=Thu，2016年12月18日12:00:00 UTC”；
}
});
函数getCookie（cname）{
变量名称=cname+“=”；
var ca=document.cookie.split（“；”）；
对于（var i=0；i对于Bootstrap 4，这是当前如何摆脱它的：

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

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

请参阅文档
使用jquery的.load可以帮我修改一下吗？当然，我刚刚编辑了答案，并在那里留下了jsfiddle链接。按预期工作。谢谢++专家
$("#example").on('click', function () {
        $('#example').popover('destroy');
    }
});

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

$(function() { 

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

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

$('#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();

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

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