html js控制页面蒙版,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';

}

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

源代码

蒙板

.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;

}

弹出蒙板

你好啊,我是内容~~

关闭

function showModel() {

document.getElementById('myModel').style.display = 'block';

}

function closeModel() {

document.getElementById('myModel').style.display = 'none';

}

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

html js控制页面蒙版,JavaScript蒙板(model)功能的简单实现代码相关推荐

html js控制页面蒙版,javascript实现蒙版与禁止页面滚动
本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动:要同 ...
html js控制页面蒙版,js实现在页面上弹出蒙板技巧简单实用
蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明.maskLayer 在popWindow上面,用于显示蒙板的信息,比如"载入中--" .popWin ...
js 控制页面跳转的5种方法
js 控制页面跳转的5种方法编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...
Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...
js控制页面滑动加载
目前页面滑动加载数据是很流行的一种方式,尤其是在手机端,应用也越来越广泛了,我在做项目的时候也遇到了,其实实现方式很简单,只是几行简单的代码就I可以搞定了,下面直接看代码 $(function() { ...
js控制页面元素的隐藏与显示
2019独角兽企业重金招聘Python工程师标准>>> <body> <div> <button οnclick='javascript:Layer ...
js控制页面刷新大全
一点点补充 1.window.open之后,子页面关闭之前刷新子页面,目前测试过的刷新方法: 1.1 window.opener.location.reload(); 该方式使用时会提示你是否确定刷新 ...
vue中通过js控制页面样式方法
在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

html js控制页面蒙版,JavaScript蒙板(model)功能的简单实现代码

html js控制页面蒙版,JavaScript蒙板(model)功能的简单实现代码相关推荐

最新文章

热门文章