重写alert，如何与原生一样阻断后续方法??????求解

sinat_33672420 2017-02-27 11:15:59

从写alert之后并不能像原生的alert阻止方法继续进行，写了跳转页面会立即刷新，有没有什么办法可以阻止js继续进行，关闭alert框之后继续执行刷新页面方法？？？

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

    window.alert = function(str) {

            var shield = document.createElement("DIV");

            shield.id = "shield";

            shield.style.position = "absolute";

            shield.style.left = "0px";

            shield.style.top = "0px";



            shield.style.width = "100%";

            shield.style.height = "100%";

            //弹出对话框时的背景颜色

            shield.style.background = "#111";

            shield.style.textAlign = "center";

            shield.style.zIndex = "25000";

            shield.style.opacity = "0.4";

            //背景透明 IE有效

            var alertFram = document.createElement("DIV");

            alertFram.id = "alertFram";

            alertFram.style.position = "absolute";

            alertFram.style.left = "50%";

            alertFram.style.top = "28%";

            alertFram.style.marginLeft = "-200px";

            alertFram.style.width = "400px";

            alertFram.style.height = "180px";

            alertFram.style.background = "#EF5F21;";

            alertFram.style.textAlign = "center";

            alertFram.style.zIndex = "25001";

            strHtml = "<div style='padding: 2px 15px;background-color:#3498db;text-align: left;color:#fff;font-weight:300'><h6 style='font-size:15px;margin:11px 0;'>消息提醒</h6></div>"

            strHtml += "<div style='background-color:#fff;text-align:left;padding:15px;'><h4>" + str +"</h4></div>"

            strHtml += "<div style='padding: 14px 15px 15px;background-color:#f5f5f5;text-align:right'><button class='btn green' type='button' onclick='doOk()'>确定</button></div>"

            alertFram.innerHTML = strHtml;

            document.body.appendChild(alertFram);

            document.body.appendChild(shield);

            this.doOk = function() {

                alertFram.style.display = "none";

                shield.style.display = "none";

            }

            alertFram.focus();

            document.body.onselectstart = function() {

                return false;

            };

        }

        function Test(){

            alert(1);

            window.location.href = '';

        }

    </script>

</head>



<body>

    <button onclick="Test()">test</button>



</body>



</html>

...全文

457 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

似梦飞花 2017-02-27

打赏
举报

q.next().value;

似梦飞花 2017-02-27

打赏
举报

alert阻塞的代码写在回调里或者封装成一方法后用generator


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<input type="button" value="show dialog" id="show"/>
<dialog id="dialog">
    <a id="ok">确定</a>
</dialog>
<script>
    var dialog=document.getElementById('dialog');
    function showDialog(){
        dialog.showModal();
    }
    function afterAlert(){
        dialog.close();
        alert('afterAlert');
    }
    function* qe(){
        while(true){
            yield showDialog();
            yield afterAlert();
        }
    }
    var q=qe();
    document.getElementById('show').onclick=document.getElementById('ok').onclick=function(){
        q.next().value();
    }
</script>
</body>
</html>

cn00439805 2017-02-27

打赏
举报

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.alert = function(str,cb) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.style.width = "100%"; shield.style.height = "100%"; //弹出对话框时的背景颜色 shield.style.background = "#111"; shield.style.textAlign = "center"; shield.style.zIndex = "25000"; shield.style.opacity = "0.4"; //背景透明 IE有效 var alertFram = document.createElement("DIV"); alertFram.id = "alertFram"; alertFram.style.position = "absolute"; alertFram.style.left = "50%"; alertFram.style.top = "28%"; alertFram.style.marginLeft = "-200px"; alertFram.style.width = "400px"; alertFram.style.height = "180px"; alertFram.style.background = "#EF5F21;"; alertFram.style.textAlign = "center"; alertFram.style.zIndex = "25001"; strHtml = "<div style='padding: 2px 15px;background-color:#3498db;text-align: left;color:#fff;font-weight:300'><h6 style='font-size:15px;margin:11px 0;'>消息提醒</h6></div>" strHtml += "<div style='background-color:#fff;text-align:left;padding:15px;'><h4>" + str +"</h4></div>" strHtml += "<div style='padding: 14px 15px 15px;background-color:#f5f5f5;text-align:right'><button class='btn green' type='button' onclick='doOk()'>确定</button></div>" alertFram.innerHTML = strHtml; document.body.appendChild(alertFram); document.body.appendChild(shield); this.doOk = function() { alertFram.style.display = "none"; shield.style.display = "none"; cb(); } alertFram.focus(); document.body.onselectstart = function() { return false; }; } function Test(){ alert(1,function(){ window.location.href = ''; }); } </script> </head> <body> <button onclick="Test()">test</button> </body> </html>