使用javascript阻止其他弹出窗口

时间:2012-08-24 16:33:00

标签: javascript checkbox popup alert

我的网站用户收到了一条提示消息:

alert("Message to users");

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

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

2 个答案:

答案 0 :(得分:0)

Firefox在浏览器中内置了此功能。我认为这是你试图复制的功能吗?

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

如果您正在询问如何创建警告框,可以采用以下几种方式:

  1. 使用该选项创建您自己的自定义提醒框。
  2. 使用确认框而不是提醒。
  3. 选项1:看起来@dystroy提供了一个如何使用jQuery执行此操作的示例。

    选项2:弹出一个OK /取消按钮。您可以将消息设置为:

      

    “向用户发送消息”

         

    您要阻止发誓吗?   这些弹出窗口从现在开始?

         

    行取消

    如果他们点击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
        }
    }
    

答案 1 :(得分:0)

以下是演示: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不够好,你可能想要调整它。