JQ权威指南：删除记录时的提示效果

最新推荐文章于 2022-03-01 20:52:10 发布

月轩居士

最新推荐文章于 2022-03-01 20:52:10 发布

阅读量781

点赞数

分类专栏： jQuery 文章标签：操作 JQuery 删除记录

本文链接：https://blog.csdn.net/scholar_man/article/details/48341361

版权

jQuery 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1.当用户单击“删除”按钮时候，整个页面背景类似关机效果，“删除”提示框突出显示，用户可以选择“关闭”按钮，或单击“确定”或“取消”操作
2.删除提示框一直居中显示，无论页面大小如何变化
3。如果对某条记录打勾，当用户单击提示框中的确定按钮时候，将在页面中删除该记录，同时关闭提示框，页面背景恢复正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>删除记录时的提示效果</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
     <style type="text/css">
           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;
           filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
   </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //注册删除按钮点击事件
                $(".mask").show(); //显示背景色
                showDialog(); //设置提示对话框的Top与Left
                $(".dialog").show(); //显示提示对话框
            })
            /*
            *根据当前页面与滚动条位置，设置提示对话框的Top与Left
            */
            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 = sclT + (brsH - curH) / 2;
                //设置对话框在页面中的位置
                objC.css({ "left": left, "top": top });
            }

            $(window).resize(function() {//页面窗口大小改变事件
                if (!$(".dialog").is(":visible")) {
                    return;
                }
                showDialog(); //设置提示对话框的Top与Left
            });

            $(".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>

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

这里写图片描述

月轩居士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ权威指南：删除记录时的提示效果

1.当用户单击“删除”按钮时候，整个页面背景类似关机效果，“删除”提示框突出显示，用户可以选择“关闭”按钮，或单击“确定”或“取消”操作 2.删除提示框一直居中显示，无论页面大小如何变化 3。如果对某条记录打勾，当用户单击提示框中的确定按钮时候，将在页面中删除该记录，同时关闭提示框，页面背景恢复正常。html xmlns="http://www.w3.org/1999/xhtml">
复制链接

扫一扫