博客園中運行自定義alert代碼

時間 2019-12-11

原文原文鏈接

效果圖：javascript

<!DOCTYPE html>
<html>
    <head>                                                                     
        <meta charset="utf-8" />
        <title>Demo</title>
        <link rel="stylesheet" type="text/css" href="asset/css/customConfirm.css"/>
        <script src="asset/js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="asset/js/customConfirm.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}
        </style>
        <script type="text/javascript">
            $(function(){
                
                $("#btn1").click(function(){
                    var txt=  "提示文字";
                    window.customConfirm(txt, window.customConfirm.typeEnum.info);
                });
                
                $("#btn2").click(function(){
                    var txt=  "提示文字";
                    window.customConfirm(txt, window.customConfirm.typeEnum.confirm);

                });
                
                $("#btn3").click(function(){
                    var txt=  "提示文字";
                    window.customConfirm(txt, window.customConfirm.typeEnum.warning);
                });
                
                $("#btn4").click(function(){
                    var txt=  "提示文字";
                    window.customConfirm(txt, window.customConfirm.typeEnum.error);
                });
                
                $("#btn5").click(function(){
                    var txt=  "提示文字";
                    window.customConfirm(txt, window.customConfirm.typeEnum.success);
                });
                
                $("#btn6").click(function(){
                    var txt=  "請輸入";
                    window.customConfirm(txt, window.customConfirm.typeEnum.input,{
                        onOk:function(v){
                            console.log(v);
                        }
                    });
                });
                
                $("#btn7").click(function(){
                    var txt=  "自定義呀";
                    var option = {
                        title: "自定義",
                        btn: parseInt("0011",2),
                        onOk: function(){
                            console.log("確認啦");
                        }
                    }
                    window.customConfirm(txt, "custom", option);
                });
                
                $("#btn8").click(function(){
                    var txt=  "默認";
                    window.customConfirm(txt);
                });
            });
        </script>
    </head>
    <body>
        <div class="" style="height: 768px;">
            <div class="sgBtn" id="btn1">彈窗1(信息)</div>
            <div class="sgBtn" id="btn2">彈窗2(提示)</div>
            <div class="sgBtn" id="btn3">彈窗3(警告)</div>
            <div class="sgBtn" id="btn4">彈窗4(錯誤)</div>
            <div class="sgBtn" id="btn5">彈窗5(成功)</div>
            <div class="sgBtn" id="btn6">彈窗6(輸入框)</div>
            <div class="sgBtn" id="btn7">彈窗7(自定義)</div>
            <div class="sgBtn" id="btn8">彈窗8(默認)</div>
        </div>
    </body>
</html>