博客园中运行自定义alert代码

时间：2017-01-01 07:58:18 阅读：264 评论：0 收藏：0 [点我收藏+]

效果图：

技术分享

<!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>