使用javascript防止其他弹出窗口

我为我的网站的用户发送了一条警告消息：

alert("Message to users");

此消息显示在继承模板的每个页面上

---

我想为用户创建一个选项，使用javascript停止额外的警报消息。我想到的是，在消息下面有一个复选框，用于停止其他消息。

Firefox在浏览器中内置了此功能。我想这就是你想要复制的功能

这里有两个不同的问题。您是在询问如何创建警报框，还是如何存储设置

如果您询问如何创建警报框，有几种方法可供选择：

使用该选项创建您自己的自定义警报框

使用确认框而不是警报

选项1:Looke提供了一个如何使用jQuery实现这一点的示例

选项2：它将弹出一个确定/取消按钮。您可以将消息设置为以下内容：

“发送给用户的消息”

您想阻止
从现在开始这些弹出窗口

好的，取消

如果点击OK，则以某种方式存储设置，以防止再次出现弹出窗口

或者，如果您希望用户能够在默认情况下单击“确定”而不阻止这些弹出窗口，则可以将消息更改为“按取消以防止将来出现这些弹出窗口”

如果希望此设置在页面加载之间保持不变，则必须将其存储在数据库、cookie、会话变量或其他内容中

您的代码可能如下所示：

if (/* check the setting to see if we should display a message */)
{
    var r = confirm("Message to users\n\nPress Cancel to prevent these popups in the future");
    if (!r)
    {
        // do something to store this setting
    }
}

下面是一个演示：

每次运行或重新加载页面时，一秒钟后都会出现一个警报

但是如果选中该复选框，您将再也看不到该警报。它的工作原理是在本地计算机中设置一个首选项，使用我在评论中建议的方法

以下是部分内容：

HTML:

<div id=alert>
    THIS IS A MESSAGE !
    <br><br><input type=checkbox id=alert_cb> SHUT UP
    <br><input type=button id=alert_close value = close>
</div>
<p>
    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal contenttttttttttt
</p>

#alert {
    display:none;
    background-color: red;
    z-index:2;
    position: fixed;
    left: 40px;
    right: 40px;
    top: 40px;
    height: 100px;
}​

setTimeout(function(){
    if (!localStorage['stop_please']) $('#alert').show('slow'); 
}, 1000);


$('#alert_close').click(function(){
    if ($('#alert_cb').is(':checked')) localStorage['stop_please'] = "pleeeeaaaaase";
    $('#alert').hide();
});​

JavaScript:

<div id=alert>
    THIS IS A MESSAGE !
    <br><br><input type=checkbox id=alert_cb> SHUT UP
    <br><input type=button id=alert_close value = close>
</div>
<p>
    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal contenttttttttttt
</p>

#alert {
    display:none;
    background-color: red;
    z-index:2;
    position: fixed;
    left: 40px;
    right: 40px;
    top: 40px;
    height: 100px;
}​

setTimeout(function(){
    if (!localStorage['stop_please']) $('#alert').show('slow'); 
}, 1000);


$('#alert_close').click(function(){
    if ($('#alert_cb').is(':checked')) localStorage['stop_please'] = "pleeeeaaaaase";
    $('#alert').hide();
});​

---

如果css不够美观，您可能需要对其进行调整。

您必须将其首选项存储在某个位置（可能是应用程序数据库中的用户记录，或用户/警报表）。您不能在网页中执行此操作，因为它们的设置将在刷新或移动到另一页时立即消失。@RobertHarvey为什么不使用localStorage？oladitan为了添加自定义复选框，您必须创建一个自定义对话框（如果您是web开发新手，请查看jquery UI）。@FilmJ我制作了一个基于localStorage的演示（非常漂亮，非常红）。见下面的答案