代码改变世界

了解遮盖层效果

  糯米粥  阅读(576)  评论(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。等等，可以去了解。

 

 

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
'
点击右上角即可分享
微信分享提示
AI IDE Trae