js弹出窗口和遮罩效果

最新推荐文章于 2023-02-06 10:07:56 发布
最新推荐文章于 2023-02-06 10:07:56 发布
阅读量3.8k 收藏 6
点赞数
分类专栏： javascript 文章标签： 文档 浏览器 xhtml html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pvfhv/article/details/6192861
版权

在项目中，经常会用到一种效果就是，点击网页中某个元素时，可以弹出一个图层，这个图层无论是否有滚动条，还是滚动条是否滚动都要保持在当前窗口的正中央，同时在这个窗口的下面有一个遮罩层，使用户不能点击这个元素下面的元素。

具体代码如下：

css如下：

    <style type="text/css">
        #btn1{
            position:fixed;
            right:0;
            bottom:0;
        }
        #div1{
            width:300px;
            height:100px;
            background-color:red;
            position:absolute;
            display:none;
            left:0;
            top:0;
            z-index:2;
        }
        #mask{
            display:none;
            position:absolute;
            background-color:black;
            filter:alpha(opactiy=20);
            opacity:0.2;
            z-index:1;
        }
    </style>
HTML代码如下： 

<body style="height:2000px; width:3000px;">
    <input type="button" value="弹出" id="btn1" />
    <div id="div1"><input type="button" value="关闭" id="close" /></div>
    <div id="mask"></div>
</body>

js代码如下： 

        $(function () {
            var $win = $(window),
                    $div = $('#div1'),
                    $mask = $('#mask'),
                    $close = $('#close'),
                    flag = false;


            $('#btn1').click(function () {                
                var clientH = $win.height(),
                    clientW = $win.width(),
                    divH = $div.height(),
                    divW = $div.width();
                var t = (clientH - divH) / 2 + $win.scrollTop();
                var l = (clientW - divW) / 2 + $win.scrollLeft();
                $div.css('display', 'block').offset({ 'top': t, 'left': l });

                $mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });
                flag = true;

                $close.click(function () {
                    flag = false;
                    $div.hide();
                    $mask.hide();
                });


                $(window).scroll(setMask).resize(setMask);

                function setMask() {
                    if (flag) {
                        $div.css('display', 'block').offset({ 'top': ($win.height() - $div.height()) / 2 + $win.scrollTop(), 'left': ($win.width() - $div.width()) / 2 + $win.scrollLeft() });
                        $mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });
                    } else {
                        $div.hide();
                        $mask.hide();
                    }
                }
            });            
        });

老白干
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery实现弹出带遮罩层的居中浮动窗口效果
11-23
本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果。分享给大家供大家参考，具体如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window&lt...
JS封装 弹起和关闭 遮罩层的 方法
sugang666的博客
12-22 1338
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt;
jquery 遮蔽元素和去除遮蔽
欢迎
06-27 399
元素点击后或其他事件执行后，需要暂时处于无法点击的状态，此时可以对元素进行遮蔽， 等之后想要重新可以触发事件，对元素去除遮蔽。 遮蔽和去除遮蔽 /** * 屏蔽元素，行内元素 * @param dom:jquery dom,如：$('#abc'); * 适用于单个元素，属性为inline-block * * */ function maskAddIn
ajax请求时加上loading遮罩
无与伦比的傻
11-07 6158
$.ajax({ url: "${ctx}/"+url, data:{id:parm}, type:"POST", beforeSend:function(){ index = layer.load(1, { shade: [0.5,'#fff'] //0.1透明度的白色背景 }); }, c...
ajax 提交加入遮罩
ninuxGihub的博客
04-19 3430
ajax 提交加入遮罩 ajax 如果采用  sync:false 那么遮罩不能够显示， 不可以是同步的，这是一个致命的弊端 js: $(document).ready(function(){ $(document).ajaxStart(function(){ $("body").mLoading('show'); }); $(document).ajaxStop(f
弹窗遮罩的几种实现方式
吾非燕的博客
05-18 7174
前端一种常见的场景就是弹窗之后背后有一层遮罩层，可以用几种不同的方式实现。方法一： html:<div class="mask"></div> <div class="warn"> <div class="title">提示</div> <div class="content">即将推出，敬请期待</div> <div class="i_know">我知道了</div> <
jQuery遮罩弹出带步骤流程窗口代码.zip
07-11
jQuery点击弹出遮罩层，操作窗口带步骤流程表单内容填写，上一步、下一步、表单完成代码。
利用js实现遮罩以及弹出可移动登录窗口
10-27
本篇文章是对使用js实现遮罩以及弹出可移动登录窗口的实现方法进行了详细的分析介绍，需要的朋友参考下
js实现遮罩层弹出框的方法
01-19
本文实例讲述了js实现遮罩层弹出框的方法。分享给大家供大家参考。具体分析如下： 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定...
js 弹出窗口
06-13
可以加载页面的弹出窗口，支持遮罩，支持拖动，支持自动关闭，支持回调函数，可以自由的设置位置，支持点击以后置于顶部
python托盘和(MSN消息)弹出框体验
07-11
本篇主要讲述 关于python 最小化托盘和 toasterbox（MSN消息弹出框） 在运行前请先将 wx.ico 图标放置程序同目录下 其中点击 ”显示toaster“ 就直接可以运行消息弹出框 点击“有消息了” 表示Session有值了，消息框就会自动弹出
19种高端大气的js遮罩弹窗效果
12-12
19种高端大气的js遮罩弹窗效果,html5+CSS3+JS,代码简介，效果全面，初学者也可看懂
js点击按钮实现带遮罩层的弹出视频效果
10-23
主要介绍了js点击按钮实现带遮罩层的弹出视频效果,需要的朋友可以参考下
遮罩弹出框
11-16
遮罩弹出框动画效果及视觉交互，各种动画，兼容各种版本包括ie
js遮罩弹窗
不懂love的博客
10-25 743
在项目中，经常会用到一种效果就是，点击网页中某个元素时，可以弹出一个图层，这个图层无论是否有滚动条，还是滚动条是否滚动都要保持在当前窗口的正中央，同时在这个窗口的下面有一个遮罩层，使用户不能点击这个元素下面的元素。具体代码如下：css如下：[css] view plaincopy"text/css">      #btn1{          position:fixed;          ri
分享123个JS特效弹出层，总有一款适合您
zy0412326的专栏
02-06 1229
JS
js ajax 点击遮罩层,js,ajax,layer笔记(弹出层,在弹出一个弹框)
weixin_34220502的博客
08-05 224
整体认识:因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js代码:/*shaun*/showdetailsPag: function () {$('.pick_carTable a').on("click",function(){var actionUrl = $(this).attr('popup-url');$.ajax({u...
网页特效之遮罩弹出
初阶农民工的博客
06-10 458
在各种网站中，经常遇到点击注册/登录,然后使用遮罩并弹出注册/登录的界面。 思路： 使用id为mask的盒子作为遮罩盒子，该盒子继承body的宽高，使用半透明黑色背景。 使用id为box的盒子作为弹出界面，该盒子还包含一个关闭按钮。 当我们点击一下注册按钮时，网页被mask盒子遮盖，并且在页面正中间出现界面box盒子 关键点： display: none;和display:block的转换 层级z...
我要写一个html的弹出窗口
最新发布
03-27
以下是一个基本的HTML弹出...在JavaScript代码中，我们编写了两个函数，showPopup()和hidePopup()，用于显示和隐藏弹出窗口。 最后，在HTML页面中，我们添加了一个按钮，用于触发showPopup()函数，以打开弹出窗口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值