如何使引导弹出窗口出现一次页面加载

How to make Bootstrap popover appears once on page load

本文关键字：一次 加载 何使引 窗口      更新时间：2023-09-26

我想使引导弹出窗口应该出现一次在页面上加载一个按钮(只是使用它作为一个指令)，点击按钮后，它应该被销毁。

我想在按钮上弹出，并得到用户的注意，每次他们访问我的页面和拖动他们的注意力点击它，如果他们是新的访问者

我已经做了下面的代码，弹出窗口出现在页面加载，但它的工作原理就像正常的弹出窗口之后，它不会被破坏，当我点击按钮。

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');
});

上面的代码根本不会弹出窗口，也不会在页面加载时正常弹出。

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

这对我有用。以后你可以隐藏它后点击。你可以在这里查看jsfiddle 

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

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

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

查看此处的文档

您可以使用cookie。在modal中添加一个复选框。我用我的a项目。试试吗?

$('#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();
相关文章：