重寫alert、confirm、promot三種彈出框

重寫alert、confirm、promot三種彈出框,去除傳統的彈出框中帶有的網址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--用於彈框樣式 add by lory 20191010-->
    <style type="text/css">
        .flowmsg {
            width: 266px;
            position: fixed;
            z-index: 999;
            top: 49%;
            margin-top: -80px;
            left: 50%;
            margin-left: -133px;
            background: #fff;
            box-shadow: 5px 5px 8px #999;
            font-size: 17px;
            color: #666;
            border: 1px solid #f8f8f8;
            text-align: center;
            line-height: 2rem;
            display: inline-block;
            padding-bottom: 20px;
            border-radius: 2px;
        }

        .flow_top {
            background: #f8f8f8;
            padding: 5px 15px 5px 20px;
            text-align: left;
        }

        .flow_close {
            font-size: 22px;
            float: right;
            cursor: pointer;
        }

        .flowmsg_cont {
            padding: 15px 20px 20px;
            text-align: left;
        }

        .flowmsg_close {
            display: inline-block;
            color: #fff;
            padding: 1px 15px;
            background: #1d7dd4;
            border-radius: 2px;
            float: right;
            margin-right: 15px;
            cursor: pointer;
        }

        #flow_prompt_cont {
            padding: 10px 20px 10px;
            text-align: left;
        }

        .flow_prompt_input{
             padding: 0px 20px 20px;
             text-align: left;
             display: block;
             height: auto ;
         }

        #flow_prompt_input{
            width:100%;
        }
    </style>
    <script src="jquery-2.1.1.min.js"></script>
</head>
<body>

<!--重寫alert、confirm、prompt-->
<script type="text/javascript">
    function alert(e) {
        $("body").append('<div id="flow_alert" class="flowmsg"><div id="flow_alert_top" class="flow_top">信息<span class="flow_close">×</span></div><div id="flow_alert_cont" class="flowmsg_cont">' + e + '</div><div class="flowmsg_close" id="flow_alert_clear">確定</div></div>');
        $("#flow_alert_clear,.flow_close").click(function () {
            $("#flow_alert").remove();
        });
    }

    function confirm(e) {
        $("body").append('<div id="flowmsg" class="flowmsg"><div id="flowmsg_top" class="flow_top">信息<span class="flow_close">×</span></div><div id="flowmsg_cont" class="flowmsg_cont">' + e + '</div><div class="flowmsg_close" id="flowmsg_sure">確定</div><div class="flowmsg_close" id="flowmsg_clear">取消</div></div>');
        $("#flowmsg_sure").click(function () {
            $("#flowmsg").remove();
            return true;
        });
        $("#flowmsg_clear,.flow_close").click(function () {
            $("#flowmsg").remove();
            return false;
        });
    }


        function prompt(e,f) {
            $("body").append('<div id="flow_prompt" class="flowmsg"><div id="flow_prompt_top" class="flow_top">信息<span class="flow_close">×</span></div><div id="flow_prompt_cont" class="flowmsg_cont">' + e + '</div><div class="flow_prompt_input"><input type="text" id="flow_prompt_input" name="flow_prompt_input" value='+f+'></div><div class="flowmsg_close" id="flow_prompt_sure">確定</div><div class="flowmsg_close" id="flow_prompt_clear">關閉</div></div>');
            $("#flow_prompt_sure").click(function () {
                var kk = $("#flow_prompt_input").val();
                $("#flow_prompt").remove();
                return kk;
            });
            $("#flow_prompt_clear,.flow_close").click(function () {
                $("#flow_prompt").remove();
            });
    };
	alert(123);
</script>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章