• 弹框


    <!DOCTYPE html> 
    
    <head>
    
    <meta charset="utf-8">
    
    <title>js confirm弹出框自定义样式</title>
    
    <style>
    
        html,body {                                                                                       
    
            margin: 0;
    
            padding: 0;
    
            font-family: "Microsoft YaHei";
    
        }
    
        .wrap-dialog {
    
            position: fixed;
    
            top: 0;
    
            left: 0;
    
             100%;
    
            height: 100%;
    
            font-size: 16px;
    
            text-align: center;
    
            background-color: rgba(0, 0, 0, .4);
    
            z-index: 999;
    
        }
    
        .dialog {
    
            position: relative;
    
            margin: 15% auto;
    
             300px;
    
            background-color: #FFFFFF;
    
        }
    
        .dialog .dialog-header {
    
            height: 20px;
    
            padding: 10px;
    
            background-color: lightskyblue;
    
        }
    
        .dialog .dialog-body {
    
            height: 30px;
    
            padding: 20px;
    
        }
    
        .dialog .dialog-footer {
    
            padding: 8px;
    
            background-color: whitesmoke;
    
        }
    
        .btn {
    
             70px;
    
            padding: 2px;
    
        }
    
        .hide {
    
            display: none;
    
        }
    
        .ml50 {
    
            margin-left: 50px;
    
        }
    
    </style>
    
    </head>
    
    <body >
    
    <input type="button" value="删除" class="btn ml50" id="remove">
    
    <div class="wrap-dialog hide">
    
        <div class="dialog">
    
            <div class="dialog-header">
    
                <span class="dialog-title">删除确认</span>
    
            </div>
    
            <div class="dialog-body">
    
                <span class="dialog-message">你确认删除此条信息?</span>
    
            </div>
    
            <div class="dialog-footer">
    
                <input type="button" class="btn" id="confirm" value="确认" />
    
                <input type="button" class="btn ml50" id="cancel" value="取消" />
    
            </div>
    
        </div>
    
    </div>
    
    </body>
    
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    
    <script>
    
        $(document).ready(function(){
    
            console.log("jquery ...");
    
            $('#remove').click(function(){
    
                var message = "你确认删除此条信息??";
    
                dialogBox(message,
    
                    function () {
    
                        console.log("confirmed");
    
                        // do something
    
                    },
    
                    function(){
    
                        console.log("canceled");
    
                        // do something
    
                    }
    
                );
    
            });
    
        });
    
        function dialogBox(message, yesCallback, noCallback){
    
            if(message){
    
                $('.dialog-message').html(message);
    
            }
    
            // 显示遮罩和对话框
    
            $('.wrap-dialog').removeClass("hide");
    
            // 确定按钮
    
            $('#confirm').click(function(){
    
                $('.wrap-dialog').addClass("hide");
    
                yesCallback();
    
            });
    
            // 取消按钮
    
            $('#cancel').click(function(){
    
                $('.wrap-dialog').addClass("hide");
    
                noCallback();
    
            });
    
        }
    
    </script>
    
    </html>
  • 相关阅读:
    【转】利用Python将多个PDF合并为一个
    sudo配置教程
    tomcat查看并修改jvm大小
    jetty隐藏版本号教程
    weblogic为同一domain下的不同server添加不同参数
    Oracle使用expdp/impdp导出导入数据
    Windows设置.txt文件默认打开程序
    weblogic查看版本号教程
    Linux登录超时自动退出处理办法
    telnet强制中断登录
  • 原文地址:https://www.cnblogs.com/zhanghailing/p/11994940.html
Copyright © 2020-2023  润新知