jQuery练习t82

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-size: 13px;
        }
        .divShow{
            line-height: 32px;
            height: 32px;
            background-color: #EEEEEE;
            width: 350px;
            padding-left: 10px;
        }
        .divShow span {
            padding-left: 50px;
        }

        .dialog {
            width: 360px;
            border: 5px solid #666666;
            position: absolute;
            display: none;
            z-index: 101;
        }
        .dialog .title{
            background-color: #fbaf15;
            padding: 10px;
            color: #ffffff;
            font-weight: bold;
        }
        .dialog .title img{
            float: right;
        }
        .dialog .content{
            background-color: #ffffff;
            padding: 25px;
            height: 60px;
        }
        .dialog .content img{
            float: left;
        }
        .dialog .content span{
            float: left;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .dialog .bottom{
            text-align: right;
            padding: 10px 10px 10px 0;
            background-color: #EEEEEE;
        }
        .mask{
            width: 100%;
            height: 100%;
            background-color: #444444;
            position: absolute;
            top: 0;
            left: 0;
            filter: alpha(opacity=30);
            display: none;
            z-index: 100;
        }
        .btn{
            border: 1px solid #666666;
            padding: 2px;
            width: 65px;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           $("#button1").click(function () {
               $(".mask").show();
               initDialog();
               $(".dialog").show();
           });

           function initDialog() {
               var objWindow = $(window);                   //window对象
               var objDialog = $(".dialog");                //dialog对象
               var braWidth = objWindow.width();            //窗体宽度
               var braHeight = objWindow.height();          //窗体高度
               var scrollLeft = objWindow.scrollLeft();     //窗体滚动左距离
               var scrollTop = objWindow.scrollTop();       //窗体滚动顶距离
               var curWidth = objDialog.width();            //dialog宽度
               var curHeight = objDialog.height();          //dialog高度
               var left = scrollLeft + (braWidth - curWidth) /2;   //计算dialog居中时左顶点
               var top = scrollTop + (braHeight -curHeight) / 2;   //计算dialog居中时顶顶点
               objDialog.css({"left":left,"top":top});           //
           }

           $(window).resize(function () {
              if(!$(".dialog").is(":visible"))
              {
                  return;
              }
              initDialog();
           });

           $(".title img").click(function () {
              closeDialog();
           });

           $("#button3").click(function () {
              closeDialog();
           });

           $("#button2").click(function () {
               closeDialog();
               if($("input:checked").length != 0)
               {
                   $(".divShow").remove();
               }
           });

           function closeDialog() {
               $(".dialog").hide();
               $(".mask").hide();
           }
        });
    </script>
</head>
<body>
    <div class="divShow">
        <input type="checkbox" id="checkbox1">
        <a href="#">这是一条可删除的记录</a>
        <span>
            <input type="button" id="button1" value="删除" class="btn">
        </span>
    </div>
    <div class="mask"></div>
    <div class="dialog">
        <div class="title">
            <img src="images/close.gif" alt="close">删除时提示
        </div>
        <div class="content">
            <img src="images/delete.jpg" alt="delete">
            <span>您真的要删除该条记录吗?</span>
        </div>
        <div class="bottom">
            <input type="button" id="button2" value="确定" class="btn">&nbsp;&nbsp;
            <input type="button" id="button3" value="取消" class="btn">
        </div>
    </div>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持,我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值