代码改变世界

了解遮盖层效果

2013-10-18 10:36  糯米粥  阅读(566)  评论(0)  编辑  收藏  举报

遮盖层其实就是一个div。跟浏览器一样大。然后盖在上面。使用户不能操作页面。都是显示遮盖效果的同时弹出一个小窗口，提示或者操作数据用

  var width = $(window).width(); //获取宽度
            var height = $(document).height(); //获取高度

            var div = $("<div class='mycover'></div>");
            $("body").append(div); //添加

            //设置样式
            div.css({ "left": "0px", "top": "0px", "width": width, "height": height, "display": "block" });

div的类样式 mycover

 

.mycover
        {
            position: absolute;
            background-color: Gray;
            opacity: 0.5;
            filter: alpha(opacity=50);
            display: none;
        }

 

这样就是一个简单的遮盖层效果。但。改变浏览器大小时候。遮盖层不会跟着改变。所有你得自己写事件（resize事件）。

现在我们模拟一个完整的代码：比如页面有个按钮。我们点击按钮的时候。让页面弹出模态窗口(其实就是显示遮盖层的同时。在页面显示一个窗口。一般是页面中间显示)

html源码

<!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 src="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $(".coverholder").showCover();
            })

            $("#btn1").click(function () {
                $(".coverholder").closeCover();
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="click" />
    <%--弹出的窗口--%>
    <div class="coverholder">
        <input type="text" /> //窗口中的text
        <input type="button" id="btn1" value="cancel" /> //窗口中的按钮
    </div>
</body>
</html>

样式

.mycover
{
    position:absolute;
    background-color:Gray;
    opacity:0.5;
    filter:alpha(opacity=50);
    display:none;
}
.coverholder
{
    position:fixed;
    width:300px;
    height:200px;
    background-color:Red;
    z-index:1000;
    display:none;
}

js部分

/*$.fn.extend 只是在扩展jquery对象的方法，只是让这个方法可以通过$("#ddd").XX();可以用，并且在里面可以用jquery对象。 */
$.fn.extend({ //这是一个扩展方法。扩展方法，
    showCover: function () {
        var width = $(window).width(); //获取宽度
        var height = $(document).height(); //获取高度

        var div = $("<div class='mycover'></div>"); //拼div
        $("body").append(div); //添加div
        
        //设置div的样式
        div.css({ "left": "0px", "top": "0px", "width": width, "height": height, "display": "block" });

        /*模态窗口 即在遮盖层效果下。页面弹出一窗口  窗口出现在页面的中间*/
        var $coverholder = $(this);
        var x = (width - $coverholder.width()) / 2; //计算出窗口的位置。同下

        var y = ($(window).height() - $coverholder.height()) / 2 ;

        $(this).css({ "display": "block", "left": x, "top": y });
        
        //resize事件 即浏览器大小。遮盖层大小和窗口位置跟着变化
        $(window).resize(function () {
            $coverholder.closeCover();
            $coverholder.showCover();
        })
    },
    //关闭窗口事件
    closeCover: function () {
         $(window).unbind("resize"); //注销resize事件
        $(this).css("display", "none");//隐藏窗口
        var div = $(".mycover");
        if (div.length > 0) { //如果div存在。则移除 用于遮盖层效果的div
            div.remove();
        }
    }
})

 

但弹出的窗口并不能移动。这些仅仅是让我们了解模态窗口是怎么实现的。只有懂得了原理。做什么都不是问题。现在有很多框架已经帮我们

实现了模态窗口的效果。比如easyui，jqueryUI。等等，可以去了解。