使用jQuery实现遮罩效果的代码(调试版)

参考资料:陶国荣著《jQuery权威指南》P107之4.8综合案例分析——删除数据时的提示效果在项目中的应用

说明:本版本为调试版,是因为增加了很多调试过程中产生的边框。

外部引入文件有:jQuery库文件和两张图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>删除记录时的提示效果</title>

        <style type="text/css">
            body{
                font-size: 13px;
            }

            .divShow{

                line-height: 32px;
                /*该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。*/
                height: 32px;
                background-color: #eee;
                width: 280px;

            }

            .divShow span{
                border:1px red solid;
                padding-left: 50px;
            }

            .dialog{
                width: 360px;
                border: 5px solid #666;
                position: absolute;/*设置成绝对定位,未知作用*/
                display: none;/**/
                z-index: 101;
            }

            .dialog .title{
                border: 1px solid #0f0;
                background-color: #fbaf15;
                padding: 10px;/*撑开了div的宽度和高度*/
                color: #fff;/*字体颜色为白色*/
                font-weight: bolder;/*加粗*/
            }

            .dialog .title img{
                float: right;
            }

            .dialog .content{
                background: #fff;
                padding: 25px;/*撑开了上下左右的距离*/
                height: 60px;
            }

            .dialog .content img{
                float: left;
            }

            .dialog .content span{
                float: left;
                border:1px solid #FF0000;
                padding-top: 10px;
                padding-left: 10px;
            }

            .dialog .buttom{
                background-color:#eee;
                text-align: right;/*把按钮也向右靠齐了*/
                padding: 10px 10px 10px 0px;
            }

            .mask{
                border:1px solid #0f0;
                background-color: #f00;
                display:none;
                width: 100%;
                height: 100%;
                position: absolute;/*设置了绝对定位以后,高度占满了整个页面*/
                top: 0px;/*设置了绝对定位以后,top值才会有效*/
                left: 0px;
            }

        </style>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

        <script type="text/javascript">

            $(function(){
                $("#button1").click(function(){
                    $(".mask").show();
                    showDialog();
                    $(".dialog").show();
                });

                // 当调整浏览器窗口的大小时,发生 resize 事件。
                $(window).resize(function(){
                    var flag = $(".dialog").is(":visible");
                    // alert(flag);
                    if(!flag){
                        return;
                    }
                    showDialog(); //重新显示对话框
                });

                // 关闭事件(实现功能:当点击关闭图片的时候,遮罩层和对话框都消失)
                $(".title img").click(function(){
                    $(".dialog").hide();
                    $(".mask").hide();
                });

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

                // 注册确定按钮点击事件
                $("#button2").click(function(){
                    $(".dialog").hide();
                    $(".mask").hide();

                    var length = $("input:checked").length;
                    if(length!=0){
                        $(".divShow").remove();
                    }

                });

            });

            function showDialog(){
                var objW = $(window); // 当前窗口
                var objC = $(".dialog"); // 对话框
                var brsW = objW.width(); // 当前用户的浏览器窗口的宽度
                var brsH = objW.height(); // 当前用户的浏览器窗口的高度
                //alert(brsW + "," + brsH);
                var sclL = objW.scrollLeft();//返回第一个匹配元素的水平滚动条位置。这里要查文档。
                var sclT = objW.scrollTop();
                var curW = objC.width();
                var curH = objC.height();
                // alert(sclL + "," + sclT);
                // alert(curW + "," + curH);

                // 设置左边距和上边距使得对话框居中(最关键的地方)
                var left = sclL + (brsW-curW)/2;
                var top = sclT + (brsH-curH)/2;
                objC.css(
                    {
                        "left":left,
                        "top":top
                    }
                );

            }
        </script>

        <meta name="author" content="Administrator" />
        <!-- Date: 2014-08-24 -->
    </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,标题层,内容层,按钮层
                -->
            <div class="title" style="border: 1px solid #f00">
                <img src="images/close.gif" alt="点击可以关闭" />删除时候提示
            </div>
            <div class="content" style="border: 1px solid #0f0">
                <img src="images/delete.jpg"  /><span>您真的要删除该记录吗?</span>
            </div>
            <div class="buttom" style="border: 1px solid #00f">
                <input type="button" id="button2" value="确定" />&nbsp;&nbsp;
                <input type="button" id="button3" value="取消" />
            </div>
        </div>

    </body>
</html>
时间: 2024-10-09 23:31:52

使用jQuery实现遮罩效果的代码(调试版)的相关文章

简单的用jQuery做遮罩效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>用jquery做遮罩</title> <style> .all{ width:100%; height:500px; background: red; position: relative; } .mask { width:100%; height:

jquery div拖动效果示例代码

1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

jquery练习动画效果-show-hide(//为注释内容)

jquery练习动画效果-show-hide代码: <!doctype html> <html> <head> <meta charset="gb2312"> <title>buzhang练习动画效果-show-hide-title</title> <!--引入jquery文件--> <script src="js/jquery-1.11.1.min.js"></s

jquery制作弹出层带遮罩效果,点击阴影部分层消失

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 1 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> 2 <div id="myModal" class="reveal-modal&quo

简单的jquery点击弹出背景变暗遮罩效果

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用......只把关键代码贴出来.并实现了点击空白处隐藏弹出层效果. js代码如下: <script type="text/javascript">  $(document).ready(function(){   $(".tkyy").click(function(event){      event.stopPropagation(); //停止事件冒泡    $(".ma

仿jQuery的siblings效果的js原生代码

仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling> 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点). 如果不存在这样的节点,则该属性返回 null.//元素节点的节点类型是 1  obj.previousSibling.nodeType ==1; reverse() 方法用于颠倒数组中元素的顺序. push() 方法可向数组的末尾添加一个

jquery轻量级鼠标悬停半透明遮罩效果,一看就懂哦

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery打造鼠标悬停图片时的半透明遮罩效果</title><style>*{margin:0;padding:0;}li{list-style:none;}.box{width:800px;height:400px;margin:50px auto;overflow:hidden;}.box ul li{widt

JQuery 实现遮罩层

1.样式如下设置: Js代码   <style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opacity:0.5; } </style> 其中: opacity:0.5;适用于IE, -moz-opacit:

[读码][js,css3]能感知鼠标方向的图片遮罩效果

效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net