Question

我在我的网站上苦苦挣扎，成员在Firefox / Chrome等中选择禁用弹出框/ javascript警报。

我使用警告框来确认某些内容，例如，是否有人想要删除邮件。

但是，如果他们一个接一个地删除一些消息太快，那么Firefox等会提供阻止进一步javascript警报的选项。然后我的会员再也无法删除他们的消息了。

我确定他们可以在客户端修复它，但是我可以在服务器端做什么来阻止成员阻止javascript警报？

由于马特

Answer 1

我不确定默认浏览器警报/弹出窗口是从UX角度来看的好方法。浏览器通常会阻止它们 - 广告。

您可能对名为alertify.js（http://fabien-d.github.io/alertify.js/）的库感兴趣。

使用此库创建警报非常简单，浏览器不会阻止它们：

alertify.alert("Hello World");

确认您在问题中提到的对话框也非常简单：

alertify.confirm("Are you sure you want to delete the message?", function (e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});

Answer 2

你可以使用自定义确认/警告/提示框这里是一个例子，我只是注意到css动画是一些实验，我在做你不需要包括这些

<!DOCTYPE html>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="customAlert.css" />
    <title>Custom Alert</title>
    </head>
    <body>


        <div id="customAlertOverlay"></div>
        <div id="customAlertBox">
            <div>
                <div id="customAlertHead"></div>
                <div id="customAlertBody"></div>
                <div id="customAlertFoot"></div>
            </div>
        </div>

        <p>other content</p>
        <button onclick="cAlert('Error', 'Message')">click me</button>
        <script src="customAlert.js" type="text/javascript"></script>
    </body>
</html>

的CSS：

 #customAlertOverlay{
        display: none; 
        opacity: 0; 
        position: fixed; 
        top: 0px; 
        left: 0px; 
        background: #FFF; 
        width: 100%; 
        z-index: 9;
        animation : cAlertFlash linear 1s infinite; 
    }
    #customAlertBox{ 
        display: none; 
        position: fixed; 
        background:#FFF; 
        border-radius:7px; 
        width:550px; 
        z-index: 10;
        top:30%;
    }
    #customAlertBox > div{ 
        background:black; 
        margin:8px; 
        border-radius: 10px;
        border:5px solid black;
    }
    #customAlertBox > div > #customAlertHead{ 
        border-radius:10px 10px 0 0;
        background: #FF6600; /*FF7112*/ 
        font-size:19px; 
        padding:10px; 
        color:black;
        text-align: center;
    } 
    #customAlertBox > div > #customAlertBody{ 
        background:#FF6600; 
        padding:20px; 
        color:black; 
    }
     #customAlertBox > div > #customAlertFoot{
        background: #FF7112; 
        padding:10px; 
        text-align:center;
        border-radius: 0 0 10px 10px;
    }
    #customAlertBox > div > #customAlertFoot:hover{
        background: #FF5E5E;
        border-top: black 1px solid;
    }
    @keyframes cAlertFlash {
        0% {opacity: 0.1;}
        25% {opacity: 0.75;}
        50%{opacity: .75;}
        100%{opacity: .1;}
    }

的javascript：

function cAlert(headMSG, bodyMSG){
    var customAlertOverlay = document.getElementById("customAlertOverlay");
    var customAlertBox = document.getElementById("customAlertBox");
    var winH = window.innerHeight;
    var winW = window.innerWidth;
    var customAlertHead = document.getElementById("customAlertHead");
    var customAlertBody = document.getElementById("customAlertBody");
    var customAlertFoot = document.getElementById("customAlertFoot");
    customAlertOverlay.style.height = winH+"px";
    customAlertBox.style.left = ((winW/2) - (550/2)) +"px";
    customAlertHead.innerHTML = headMSG;
    customAlertBody.innerHTML = bodyMSG;
    $("#customAlertOverlay").slideDown("fast");
    $("#customAlertBox").slideDown("fast");
    customAlertFoot.innerHTML = "Ok";
}


$(document).ready(function(){
    $("#customAlertBox").draggable();
    $(document).on("click", "#customAlertFoot", function(){
        $("#customAlertOverlay").slideUp("fast");
        $("#customAlertBox").slideUp("fast");
    });
});

<强> FIDDLE - working with exception of dialog close

Answer 3

如果你不想要一个沉重的足迹（我也没有真正的风格），我很快就把它鞭打在了一起。但您可以使用此代码将原始html放入确认框中。

HTML

<div id="confirm">
    <div class="message"></div>
    <button onclick="$('#confirm').hide()[0].success();">Ok</button>
    <button onclick="$('#confirm').hide()[0].failure();">Cancel</button>    
</div>

JS

var $confirm = $("#confirm");    
function confirm(msg, success, failure) {
    $confirm.find(".message").html(msg);
    $confirm.show();
    $confirm[0].success = success;
    $confirm[0].failure = failure;
}

CSS

#confirm {
    display : none;
    width : 100px;
    height : 100px;
    position : fixed;
    border : 1px solid black;
    top : 5px;
    right : 5px;
}

http://jsfiddle.net/hVC5A/4/

用户阻止javascript弹出框

3 个答案: