JavaScript蒙板(model)功能的简单实现代码

思路:

•创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住

position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9, 9, 9, 0.63);
width: 100%;
height: 100%;
z-index: 1000; •设置蒙板中内容的背景色和展示格式
width: 50%;
text-align: center;
background: #ffffff;
border-radius: 6px;
margin: 100px auto;
line-height: 30px;
z-index: 10001; •绑定事件, 动态切换蒙板的 display 属性
function showModel() {
document.getElementById('myModel').style.display = 'block';
}
function closeModel() {
document.getElementById('myModel').style.display = 'none';
}

注意事项: 蒙板要采用绝对定位, 宽和高要占満整个页面, 堆叠顺序要大

源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>蒙板</title>
<style>
.container {
width: 900px;
margin: 50px auto;
text-align: center;
}
#myModel {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9, 9, 9, 0.63);
width: 100%;
height: 100%;
z-index: 1000;
}
.model-content {
width: 50%;
text-align: center;
background: #ffffff;
border-radius: 6px;
margin: 100px auto;
line-height: 30px;
z-index: 10001;
}
</style>
</head>
<body>
<div class="container">
<button onclick="showModel()">弹出蒙板</button>
<div id="myModel" onclick="closeModel()">
<div class="model-content">
<p>你好啊,我是内容~~</p>
<p>
<button id="closeModel" onclick="closeModel()">关闭</button>
</p>
</div>
</div>
</div>
<script>
function showModel() {
document.getElementById('myModel').style.display = 'block';
}
function closeModel() {
document.getElementById('myModel').style.display = 'none';
}
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript蒙板(model)功能的简单实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • [JSF]使用DataModel处理表行事件的实例代码

    比如,在Goods类中有一个goodsList存放了当前的所有商品,页面的代码为: js 代码 复制代码 代码如下: <f:view><h:form>...<h:dataTablevalue="#{Goods.goodsList}"var="goods"><h:column><f:facetname="header"><h:outputTextvalue="Name&qu

  • JavaScript中的View-Model使用介绍

    构成 这是一个十分常见的微博列表页面,类似于新浪微博.上周末,在心无旁骛情况下,一共用了5个对象,产出400行代码,实践出一种代码组织模式. 使任务轻松完成的代码有4个方面的要素组成: 要素 组成 模型 Reply.Forward 视图 CommentEditor.ReplyList.ForwardList 模板 jQuery.tmpl 异步任务 jQuery.Deferred分部介绍 模型 模型只与数据有关,它能够产生.过滤.保存.验证数据,并且仅此而已. 如下例,留言模型在调用保存方法时,只

  • AngularJs 弹出模态框（model）

    推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res

  • Django中模型Model添加JSON类型字段的方法

    本文实例讲述了Django中模型Model添加JSON类型字段的方法.分享给大家供大家参考.具体如下: Django里面让Model用于JSON字段,添加一个JSONField自动类型如下: class JSONField(models.TextField): __metaclass__ = models.SubfieldBase description = "Json" def to_python(self, value): v = models.TextField.to_pytho

  • js实现在页面上弹出蒙板技巧简单实用

    蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明.maskLayer 在popWindow上面,用于显示蒙板的信息,比如"载入中--" 复制代码 代码如下: <html> <head> <style type="text/css"> .popWindow { background-color:#9D9D9D; width: 100%; height: 100%; left: 0; top: 0; fi

  • javascript创建页面蒙板的一些知识技巧总结第1/3页

    在ajax大行其道的今天,模拟弹出窗口,或者thinkbox,greybox等很多特效都用了蒙板的功能,其应用原来对于我们来说也很简单:创建一个绝对定位,top/left都为0,宽度和高度等于浏览器内容的高宽,然后索引设置的大点即可.可是这里有一些问题和技巧可能是您一直都不知道或者不清楚的,这里总结几点,这些都是个人学习的过程中发现的. 1.创建的蒙板如果要禁止对蒙板下部内容的操作必须设置background属性且必须设置一个有效的值,否则虽然遮罩层创建成功,但仍然可以对页面下部的元素进行操作.

  • angularjs自定义ng-model标签的属性

    angularjs自定义ng-model标签的属性

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素 html: <style> .text{ margin:0 auto; width:100px; height:50px; border:1px solid red; } </style> </head> <body> <div ng-co

  • angularjs在ng-repeat中使用ng-model遇到的问题

    在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决. 例如: html: <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"

  • javascript 窗口加载蒙板 内嵌网页内容

    复制代码 代码如下: //初始化导航背景,iframe容器 function fnDaoHangBg() { var h = fnGetHeight(),w = fnGetWidth();//获取背景窗口大小 if(!$('divDaoHangBg')) { var div = $C('div');//创建背景蒙板 div.id = 'divDaoHangBg'; div.style.backgroundColor = 'black'; div.style.position = 'absolut

  • JavaScript蒙板(model)功能的简单实现代码

    思路: •创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住 position: absolute; top: 0; left: 0; display: none; background-color: rgba(9, 9, 9, 0.63); width: 100%; height: 100%; z-index: 1000; •设置蒙板中内容的背景色和展示格式 width: 50%; text-align: center; background: #ffffff; border-radius

  • 仿百度换肤功能的简单实例代码

    仿百度换肤功能的简单实例代码

    效果:(换肤出来一个div,选择你想要的图片,作为网页背景,保存) 要点:cookie保存状态 html代码: <body> <div id="header"> <div id="header_con"> <div class="dbg"><a href="javascript:;" onclick="showImgBox()">换肤</a&

  • C#仿密保卡功能的简单实现代码

    C#仿密保卡功能的简单实现代码

    不过我写的比较草率,代码结构不是很好,也没有体现OOP的思想,这几天有空会重构一下. 先把代码发出来: 复制代码 代码如下: public class MatrixCardManager     {         public static int[,] ReadMatrixCardFromString(string matrixStr)         {             int[,] arr1 = new int[5, 5];             int[] tempArr =

  • javascript实现添加附件功能的方法

    javascript实现添加附件功能的方法

    在邮件中我们经常用到添加附件,现在简单的应用下: 效果图: 实现原理: 采用table标签的,主要思想:采用table标签方式 1.点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之后,可以insertRow() insertCell())创建行和列 2.删除的时候通过父节点来移除 核心代码: function creatMail(){ var tab=document.getElementById("tabid"); var tr=tab.insertRow();/

  • JavaScript实现页面高亮操作提示和蒙板

    JavaScript实现页面高亮操作提示和蒙板

    本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的具体代码,供大家参考,具体内容如下 在页面上,有时候会遇到操作提示,如下图所示. 可以很直观的告诉用户,关键的操作在哪里,有什么做作用. 需要说明的是,被高亮的部分,并不是目标的真实标签,而是用的其他标签模拟的. 真实的标签被 mask 层盖住了,在下方呢. 标签高亮的部分和操作提示框,都是用 js 动态生成的. 这里关键的知识点: 1.要用 JS 获取目标标签的位置. el.getBoundingClientRect() 可以

  • JS实现简易留言板增删功能

    本文实例为大家分享了JS实现留言板增删功能的具体代码,供大家参考,具体内容如下 ## **JS实现简易留言板的增删功能** 一个很简单的留言板,实现**增删**功能,因为没有数据库,所以只是一个静态的留言板功能. **修改**功能其实也可以添加,但是我现在技术不够,等以后可能会添加**修改**功能. 代码很简单,注释很清楚.``` <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

  • 基于JavaScript实现图片裁剪功能

    目录 一.图片文件的上传和读取 二.图片展示和蒙层处理 CSS clip-path 三.裁剪框展示 裁剪框的缩放点 cursor 鼠标样式 四.裁剪框移动事件 五.裁剪框缩放操作 六.完成裁剪功能 drawImage 后记 在前端开发中,当遇到图片或头像上传等功能时,有尺寸分辨率限制的话,就需要用到图片的裁剪功能.想了解图片基础知识的,可见前文图片基础知识介绍. 而canvas的使用,对于我们直接在web端实现图片裁剪功能成为可能.本文将使用前端技术实现一个图片的裁剪功能. 一.图片文件的上传和

随机推荐