Fatal编程技术网

阻止javascript弹出框的用户

javascript firefox

阻止javascript弹出框的用户,javascript,firefox,popup,alert,blocking,Javascript,Firefox,Popup,Alert,Blocking,我在我的网站上苦苦挣扎，会员们在Firefox/Chrome等浏览器中选择禁用弹出框/javascript警报 我使用警报框来确认一些事情，例如，如果有人想删除一条消息 但是，如果他们一条接一条地删除一些消息太快，那么Firefox etc会提供阻止进一步javascript警报的选项。然后我的成员就不能再删除他们的邮件了 我相信他们可以在客户端修复它，但我可以在服务器端做些什么来阻止成员选择阻止javascript警报 谢谢 Matt您可以使用自定义确认/警报/提示框这里是我做的一个示例，请注

我在我的网站上苦苦挣扎，会员们在Firefox/Chrome等浏览器中选择禁用弹出框/javascript警报

我使用警报框来确认一些事情，例如，如果有人想删除一条消息

但是，如果他们一条接一条地删除一些消息太快，那么Firefox etc会提供阻止进一步javascript警报的选项。然后我的成员就不能再删除他们的邮件了

我相信他们可以在客户端修复它，但我可以在服务器端做些什么来阻止成员选择阻止javascript警报

谢谢
Matt

您可以使用自定义确认/警报/提示框这里是我做的一个示例，请注意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>
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");
    });
});

如果您不想占用大量的空间（也不是真正的样式），我会很快将其组合在一起。但您可以使用此代码将原始html放入确认框中

HTML

CSS

从用户体验的角度来看，我不确定默认浏览器提醒/弹出窗口是否是一种好方法。浏览器通常会因为一个很好的原因阻止它们——广告

您可能对名为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"
    }
});
使用HTML/CSS对话框而不是
confirm（）
。您可以创建自定义对话框。唯一的问题是您需要将代码更改为面向回调（vs阻塞）。juqeryUI是另一个选项。这里有一个问题，因为我无法关闭这个框，因为jquery无法正确加载，因为我需要将脚本放在正文的末尾 
var $confirm = $("#confirm");    
function confirm(msg, success, failure) {
    $confirm.find(".message").html(msg);
    $confirm.show();
    $confirm[0].success = success;
    $confirm[0].failure = failure;
}

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

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