用JavaScript在页面上弹出蒙板（最简单的了，绝对可以用）

最新推荐文章于 2022-02-28 21:02:42 发布
最新推荐文章于 2022-02-28 21:02:42 发布
阅读量7.5k 收藏 7
点赞数 2
分类专栏： JavaScript html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangshh0/article/details/8809795
版权

蒙板是两个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 {
        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 οnclick="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="#" οnclick="closeDiv()"  style="cursor:pointer;text-decoration: none;">
          	  关闭蒙板 
          </a>
	</div>
</body>
</html>


yangshh0
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
页面加载时遮罩蒙版
12-06
页面加载时遮罩蒙版，自己手写js，利用gif图加载蒙版，animation动画蒙版
实现网页蒙板效果和弹出层的html示例
07-28
有些时候需要自己实现蒙板效果和弹出层的效果，这是一个简单的实现网页蒙板效果和弹出层的html示例
网页页面蒙版实现
weixin_34400525的博客
04-07 257
做手机端网页的时候，设计师做了这样一张图： 这个页面除了底层的布局，主要的工作是蒙版的实现，这种特效很常见到，淘宝改版的时候会弹出也是这种效果，引导剁手党熟悉新布局和功能，以便让他们更好的败家。还有好多app也有这种效果，多是领取每日任务之类的页面。 用处这么广泛，就想着实现下。分析：不考虑js效果的话，其实就是几层页面的关系。最底下是一层正常的网页，中间是一层灰色的蒙版，好了，蒙版上面...
页面蒙版效果集锦
45度的天空
07-08 256
事先声明，一下例子均能跑通，但非本人所写，原创的链接已不得而知 事例一： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;/head&gt; &lt;body style="margin:0;"&g
JS创建页面蒙板的一些知识技巧总结-ajax技巧
牛皮纸
08-30 1196
       在ajax流行的今天，模拟弹出窗口，或者thinkbox，greybox等很多特效都用了蒙板的功能，其实实现起来十分简单，关键是获取浏览器的高度和宽度----1、创建一个绝对定位，top/left都为0，----2、宽度和高度等于浏览器内容的高宽，----3、然后索引设置的大点即可。1、创建的蒙板如果要禁止对蒙板下部内容的操作必须设置background属性且必须设置一个
js实现在页面上弹出蒙板技巧简单实用
12-01
蒙板是两个div，其中popWindow样式的div用于遮住整个页面，并半透明。maskLayer 在popWindow上面，用于显示蒙板的信息，比如“载入中……“ 代码如下: <html> <head> <style type=”text/css”> ....
javascript创建页面蒙板的一些知识技巧总结第1/3页
10-30
javascript创建页面蒙板的一些知识技巧总结
WPF弹出带蒙板的消息框
12-30
拿到父级窗体的内容,放入一个容器里,再在容器里放入一个半透明层.将整个容器赋给父级窗体的内容. 关闭时反向操作. 代码 消息窗弹出时 /// /// 弹出消息框 /// /// 消息 /// 父级窗体 public static void ...
JavaScript蒙板(model)功能的简单实现代码
10-21
JavaScript中的蒙板（Modal）功能通常用于在网页上创建一种半透明覆盖层，用于显示临时信息、对话框或用户交互。在本文中，我们将深入探讨如何通过简单的JavaScript代码实现这一功能。 首先，创建一个蒙板的基本...
页面添加蒙版，但是不影响页面其他事件响应
xiaonadiandian的专栏
07-15 1918
页面添加蒙版，但是不影响页面其他事件响应，主要是自定义一个控件，方便使用。
Bootstrap实现遮罩层
07-01
Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168
前端如何创建好看的简洁的蒙版弹窗
web全栈开发的博客
09-30 1216
平时我们创建弹窗蒙版时，都是给创建一个div，然后给div添加透明背景色，相信大多数人都是这样写的， 包括我以前也是这样创建蒙版弹窗的。 下面给大家一个介绍一个新的方法 <div id="app"> 这里是页面主题内容 </div> <div> 这里是弹窗内容 //这里不需要创建蒙版 <div> 当前弹窗显示是 我们在 app 里修改样式 <div id="app" style="filter: blu
JS基础-特效篇（三大家族）11-冒泡案例（登录蒙版）
weixin_45799003的博客
05-11 98
1.效果：页面上有个登录按钮，点击登录按钮后进入页面，点击蓝色方块进入目标页面，无法滚动！ 2.自己的工具库MyTool.js var myTool = { $: function (id) { return typeof id === "string" ? document.getElementById(id) : null; }, scroll: function () { if (window.pageYOffset !== null) { /
前端HTML背景蒙板
个人笔记
02-28 724
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 600px; height: 600px; background: url(img/1.png); border: 3px solid gold; /*背景蒙
Vue+bootstarp,页面跳转出现灰色遮罩蒙版
qq_53281952的博客
11-19 1240
解决：在Vue的创建生命周期钩子写下下面两行代码即可 $(".modal-backdrop").remove(); $("body").removeClass('modal-open'); 原因： 页面跳转的按钮放置在，bootstrap的模态框，模态框自带遮罩，跳转页面的时候带过去了，新页面创建时删除就OK。 ...
为网页添加蒙板效果和弹出层js
yu13767514297的专栏
07-28 6888
有的时候我们需要实现弹出一个层然后下面的层被一层蒙板蒙起来使用户不能点击里面的按钮效果，这一效果具体实现的代码如下：这是一个测试效果用的html，可以直接拷贝到html文件中执行。 //获得坐标         function getPosition() {             var top = document.documentElement.scrollTop;
前端页面加蒙版的几种方法
qq_43296918的博客
05-27 1万+
前端界面通常常需要在区域上加蒙版 以下个人整理了几种添加蒙版介绍 one 采用定位的父子级别加蒙版,采用子绝父相对的方式，需要注意层级性。 <!--模板以下均是这个模板--> <div class="wrap"> <!--<div class="mark"></div>--> <div class="inner"...
CSS3 遮罩蒙版效果 分栏效果
热门推荐
浅醉樱花雨的专栏
09-07 1万+
mask遮罩蒙版效果 来看一下效果图： 这是两张原图： 遮罩层图像 注意，白色区域为透明状态 要展示的图像     使用mask之后产生的效果图   首先来解释一下遮罩、蒙版。和PS中的蒙版、Flash中的遮罩层很类似 遮罩：为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示
html5页面蒙版原理,html加蒙版效果
weixin_42447265的博客
05-31 1284
body更新状态{% csrf_token %}请稍等...style.popWindow {background-color: #9D9D9D;width: 100%;height: 100%;left: 0;top: 0;filter: alpha(opacity=50);opacity: 0.5;z-index: 1;position: absolute;}.load_ts {color: ...
LVGL的蒙板使用方式
最新发布
06-11
LVGL的蒙板使用方式如下： 1. 创建一个蒙板对象 可以使用`lv_obj_create()`函数创建一个蒙板对象，例如： ``` lv_obj_t *mask = lv_obj_create(parent, NULL); ``` 其中，`parent`是蒙板对象的父对象，可以是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值