用javascript为页面添加蒙版效果和弹出层

最新推荐文章于 2021-08-26 19:11:57 发布
最新推荐文章于 2021-08-26 19:11:57 发布
阅读量6k 收藏 9
点赞数 2
分类专栏： 学习笔记 文章标签： javascript 蒙版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joseydon/article/details/80025624
版权

用javascript为页面添加蒙版效果和弹出层

id为popWindow的div就是蒙版层，id为maskWindow的div是弹出层。

<html>  
<head>  
<style type="text/css">  
    .popWindow {  
        background-color:#9D9D9D;  
        width: 100%;  
        height: 100%;  
        left: 0;  
        top: 0;  
        filter: alpha(opacity=50);  
        opacity: 0.5;  
        z-index: 1;  
        position: absolute;  

    }  
    .maskLayer {  
        background-color:#000;  
        width: 200px;  
        height: 30px;  
        line-height: 30px;  
        left: 50%;  
        top: 50%;  
        color:#fff;  
        z-index: 2;  
        position: absolute;  
        text-align:center;  
    }  
</style>  
<script language="javascript" type="text/javascript">  

    function showDiv() {  
        document.getElementById('popWindow').style.display = 'block';  
        document.getElementById('maskLayer').style.display = 'block';        
    }  
    function closeDiv() {  
        document.getElementById('popWindow').style.display = 'none';  
        document.getElementById('maskLayer').style.display = 'none';  
    }  
</script>  
</head>  
<body>  
    <div onclick="showDiv()" style="display:block; cursor:pointer">  
            弹出蒙板  
    </div>  
    <div id="popWindow" class="popWindow" style="display: none;">  
    </div>  
    <div id="maskLayer" class="maskLayer" style="display: none;">  
          <a href="#" onclick="closeDiv()"  style="cursor:pointer;text-decoration: none;">  
              关闭蒙板   
          </a>  
    </div>  
</body>  
</html>
毛球Josey
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js实现弹出最简单的模式化遮罩层
xubolqingqin的专栏
12-03 647
假设我们有一个容器container如下:        #container{width:auto;height:auto; overflow:hidden;}        /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏，之所以设置这个属性，是为了解决ie8及以下版本浏览器兼容性问题*/   现在要在网页中弹出一个di
实现网页蒙板效果和弹出层的html示例
07-28
你可以根据实际需求调整CSS样式和JavaScript逻辑，例如添加动画效果、调整蒙板透明度或弹出层位置等。这个示例中的"实现蒙板效果的js.html"文件应该包含了上述代码，你可以下载并查看具体实现。通过实践和学习，你将...
js实现蒙版效果
01-19
本文实例为大家分享了js实现蒙版效果展示的具体代码，供大家参考，具体内容如下 思路 1.监听按钮的点击 2.阻止冒泡（最关键的一点） 3.让隐藏的显示出来 4.隐藏滚动条 5.点击文档：获取点击的标签 判断：让显示的都隐藏 显示滚动条 <style> *{ margin: 0; padding: 0; } html,body{ width:100%; height:100%; } #panel{ width:100%; height:2000px; backgroun
js-实现蒙层功能
weixin_45630548的博客
08-26 973
<style> #mask { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; display: none; } ..
JS弹出可拖动层,并蒙住页面
weixin_30276935的博客
02-01 132
2007年11月30日 星期五 上午 11:32 其实这个效果是很常见的,很多现在的网站上都有这个效果,它的主要部分都是用JS实现的,昨天注意看了一下,原理说通了还是很简单的,不过我一开始什么都不知道.所以做起来很麻烦..换了很多的方案.,. 1)首先是要...
html5页面蒙版原理,js如何实现蒙版效果
weixin_39851048的博客
05-31 280
我们来分析一下思路：1、监听按钮的点击2、阻止冒泡(最关键的一点)3、让隐藏的显示出来4、隐藏滚动条5、点击文档：获取点击的标签判断：让显示的都隐藏显示滚动条*{margin: 0;padding: 0;}html,body{width:100%;height:100%;}#panel{width:100%;height:2000px;background-color:#000;opacity: ...
js 透明层蒙层弹窗
lllllyyyy的博客
12-20 896
设置弹出的div样式为 display: block; background: beige; position: absolute; top: 30%; left: 30%; width: 27%; 设置一个before 样式 position: fixed; top: 0; left: 0; z-index...
html js控制页面蒙版,js实现蒙版效果
weixin_42513512的博客
06-03 537
本文实例为大家分享了js实现蒙版效果展示的具体代码，供大家参考，具体内容如下思路1.监听按钮的点击2.阻止冒泡(最关键的一点)3.让隐藏的显示出来4.隐藏滚动条5.点击文档：获取点击的标签判断：让显示的都隐藏显示滚动条*{margin: 0;padding: 0;}html,body{width:100%;height:100%;}#panel{width:100%;height:2000px;b...
Colorbox弹出层插件使用API与中文教程
11-10
例如，`width`和`height`可以设置弹出层的尺寸，`opacity`用于控制蒙版的透明度，`onOpen`和`onClose`是回调函数，分别在弹出层打开和关闭时执行。还有`href`参数，用于指定要显示的内容源，可以是URL、DOM元素或者...
微信小程序实现蒙版弹出窗功能
10-16
在微信小程序开发中，创建蒙版弹出窗功能是一项常见的需求，通常用于显示警告、确认对话框或者加载提示等。本文将详细讲解如何通过WXML、WXSS和JS这三种技术来实现这一功能。 首先，我们需要在WXML（微信小程序的...
js实现在页面上弹出蒙板技巧简单实用
12-01
蒙板是两个div，其中popWindow样式的div用于遮住整个页面，并半透明。maskLayer 在popWindow上面，用于显示蒙板的信息，比如“载入中……“ 代码如下: <html> <head> <style type=”text/css”> .popWindow { background-color:#9D9D9D; width: 100%; height: 100%; left: 0; top: 0; filter: alpha(opacity=50); opacity: 0.5; z-index: 1; position: absolute; } .maskLayer { b
js蒙版特效
03-30
jquery js实现的蒙版特效。蒙版层未关闭时，只能对蒙版当前层进行操作。
jquery实现蒙版效果
06-30
jquery实现蒙版效果,可以用在微信诱导点击等等
JSP页面增加遮罩
03-08
JSP页面增加遮罩
jsp页面加载之遮罩层
04-22
NULL 博文链接：https://2814704901.iteye.com/blog/1955402
弹页面窗口
12-23
2. **弹出窗口原理**：弹出窗口通常是通过在当前页面上覆盖一个半透明的灰色背景层（也称为蒙版）和一个独立的浮动层来实现的。灰色背景用于降低主页面的视觉焦点，让用户专注于弹出的内容。 3. **CSS样式**：为了...
微信判断浏览器自动弹出遮罩层【完整代码】
01-08
如果`mask`元素的高度为0，那么我们可以认为微信浏览器没有自动弹出遮罩层。这个检测会在页面加载完成和窗口尺寸变化时执行，以确保在任何情况下都能正确识别。 配合提供的`index.html`文件，你可以直接运行此代码...
js实现模糊的蒙层
weixin_38208314的博客
11-27 715
在项目当中遇到一个问题：在做新人指导的时候，蒙层需要是模糊的，使得下方的内容看不清楚。 这里有一个误区：以为模糊的那层是加在蒙层上的，其实是加在蒙层下方的内容上的，当蒙层出现时，就给该内容加上 filter:blur(6px) 这样在蒙层的效果下，就会有一种蒙层是模糊的错觉。加属性的元素应该是与蒙层一级的元素，不然会使得蒙层上的内容也变得模糊。 ...
jsp页面弹出模式窗口（带蒙板，居中）
Lam's IT Story
04-14 1339
首先约定以下两个词：原窗口——父窗口；弹出的模式窗口——子窗口。 在父窗口点击某个按钮或者超练级会触发以下js方法： //打开时调用 function editPassword(url,w,h) { //url是你模式窗口对应的页面，w、h分别是模式窗口的高度和宽度 var iTop2 = (window.screen.availHeight - 20 - h) /...
uniapp跳转页面过渡效果与蒙版
最新发布
11-22
以下是uniapp跳转页面过渡效果与蒙版的介绍： 1.跳转页面过渡效果 在uniapp中，可以通过设置页面的animation属性来实现跳转页面的过渡效果。具体步骤如下： （1）在跳转的目标页面中，设置页面的animation属性，例如： ```html <template> <view class="container" animation="{{animationData}}"> <!-- 页面内容 --> </view> </template> <script> export default { data() { return { animationData: {} // 动画对象 } }, onShow() { // 创建动画对象 const animation = uni.createAnimation({ duration: 500, // 动画时长 timingFunction: 'ease-in-out', // 缓动函数 delay: 0 // 延迟时间 }) // 设置动画效果 animation.translateX(100).step() // 更新动画对象 this.animationData = animation.export() } } </script> ``` （2）在跳转的源页面中，使用uni.navigateTo或uni.redirectTo方法跳转到目标页面，例如： ```javascript uni.navigateTo({ url: '/pages/target/target' }) ``` 2.蒙版 在uniapp中，可以通过设置一个遮罩层来实现蒙版效果。具体步骤如下： （1）在页面中添加一个遮罩层，例如： ```html <template> <view class="container"> <!-- 页面内容 --> <view class="mask" v-show="showMask"></view> </view> </template> <style> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } </style> ``` （2）在页面的data中添加一个showMask属性，用于控制遮罩层的显示和隐藏，例如： ```javascript export default { data() { return { showMask: false // 是否显示遮罩层 } } } ``` （3）在需要显示遮罩层的时候，将showMask属性设置为true，例如： ```javascript this.showMask = true ``` （4）在需要隐藏遮罩层的时候，将showMask属性设置为false，例如： ```javascript this.showMask = false ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值