jQuery练习t82

最新推荐文章于 2024-09-27 16:31:33 发布

虾米大王

最新推荐文章于 2024-09-27 16:31:33 发布

阅读量169

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/modern358/article/details/112833937

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

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