javascript - 使用 javascript 防止额外的弹出窗口

Question

我有一条针对我网站用户的警告消息：

alert("Message to users");

此消息出现在每个继承模板的页面上。

我想为用户创建一个选项，以使用 javascript 停止其他警报消息。我想到的是消息下方的复选框以停止其他消息。

Answer 1

Firefox 在浏览器中内置了此功能。我认为这是您要复制的功能？

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

如果您询问如何创建警报框，您可以使用以下几种方法：

1. 使用该选项创建您自己的自定义警报框。
2. 使用确认框而不是警报。

选项 1：看起来@dystroy提供了一个如何使用 jQuery 执行此操作的示例。

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

“给用户的消息”

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

确定 取消

如果他们点击确定，以某种方式存储设置以防止弹出窗口再次发生。

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

如果您希望此设置在页面加载之间保持不变，则必须将其存储在数据库、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
    }
}

Answer 2

这是一个演示：http: //jsfiddle.net/jR8hk/

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

但是，如果您选中该复选框，您将永远不会再看到警报。正如我在评论中建议的那样，它通过使用localStorage在本地计算机中设置首选项来工作。

这是部分：

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>

CSS：

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

JavaScript：

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。