码迷,mamicode.com
首页 > 其他好文 > 详细

[JQ权威指南]第十六天:删除记录时的提示效果

时间:2015-09-02 09:29:39      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:提示框

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>

技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

[JQ权威指南]第十六天:删除记录时的提示效果

标签:提示框

原文地址:http://blog.csdn.net/david_520042/article/details/48173601

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!