实现自定义删除对话框-优快云博客

本文链接：https://blog.youkuaiyun.com/tianjun2012/article/details/50255053
还是不说废话，上图，看效果
这里写图片描述
前端代码如下：
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <script language="JavaScript" type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <style>
             body{font-size:13px}
           .divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px}
           .divShow span{padding-left:50px}
           .dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
           .dialog .title{background-color:#fbaf15;padding:10px;color:#fff;font-weight:bold}
           .dialog .title img{float:right}
           .dialog .content{background-color:#fff;padding:25px;height:60px}
           .dialog .content img{float:left}
           .dialog .content span{float:left;padding-top:10px;padding-left:10px}
           .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
           .mask {width:100%;height:100%; background-color:#000;position:absolute;
                  top:0px;left:0px;filter:alpha(opacity=30);display:none;z-index:100} 
           .btn {border:#666 1px solid;padding:2px;width:65px;}
        </style>
        <script type="text/javascript">
            $(function(){
                $("#Button1").click(function(){//注册删除按钮点击事件
                    $(".mask").show();//显示背景色
                    showDialog();//设置提示对话框的Top与Left
                    $(".dialog").show();//显示提示对话框
                })

                function showDialog(){
                    var objW = $(window);//当前窗口
                    var objC = $(".dialog");//对话框
                    var brsW = objW.width();
                    var brsH = objW.height();
                    var sclL = objW.scrollLeft();
                    var sclT = objW.scrollTop();
                    var curW = objC.width();
                    var curH = objC.height();
                    //计算对话框居中时的左边距
                    var left = sclL+(brsW-curW)/2;
                    //计算对话框居中时的上边距
                    var top = sclL+(brsH-curH)/2;
                     //设置对话框在页面中的位置
                    objC.css({"left":left,"top":top});
                }

                $(window).resize(function(){//页面窗口大小改变事件
                    if(!$(".dialog").is(":visible")){
                        return;
                    }
                    showDialog();
                })

                $(".title img").click(function(){//注册关闭图片点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                })

                $("#Button3").click(function(){//注册取消按钮点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                })

                $("#Button2").click(function(){//注册确定按钮点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                    if($("input:checked").length!=0){
                        $(".divShow").remove();
                    }
                })

            })

        </script>
    </head>
    <body>
         <div class="divShow">
         <input id="Checkbox1" type="checkbox" />
         <a href="#">这是一条可删除的记录</a>
         <span>
               <input id="Button1" type="button" value="删除" class="btn" />
         </span>
     </div>
     <div class="mask"></div>
     <div class="dialog">
          <div class="title">
               <img src="Images/close.gif" alt="点击可以关闭" />删除时提示
          </div>
          <div class="content">
               <img src="Images/delete.jpg" alt="" /><span>您真的要删除该条记录吗？</span>
          </div>
          <div class="bottom">
              <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;
              <input id="Button3" type="button" value="取消" class="btn"/>
          </div>
     </div>
    </body>
</html>
删除数据时的提示效果
