利用 js 实现弹出蒙板(model)功能
关于 js 实现一个简单的蒙板功能(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>
利用 js 实现弹出蒙板(model)功能的更多相关文章
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ,弹出提示框
1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 在android中有时候可能要实现一个底部弹 ...
- js插件---弹出层sweetalert2(总结)
js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...
- js 实现弹出层效果
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- 如何设置secureCRT的鼠标右键为弹出文本操作菜单功能
secureCRT的鼠标右键功能默认是粘贴的功能,用起来和windows系统的风格不一致, 如果要改为右键为弹出文本操作菜单功能,方便对选择的内容做拷贝编辑操作,可以在 options菜单----&g ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- JS设置弹出小窗口。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...
随机推荐
- linux下怎么编译运行C语言程序?
linux下的C语言编译器是gcc,C++的编译器是g++. linux下编程可以使用编辑器vi或vim,建议使用vim,因为它有语法高亮显示.程序编写好后,假设你的程序名为test.c,可以使用gc ...
- 开篇 hello 内Cool超人
经过一年时间看到asp.net mvc一直被受微软开发团队的注重.与之相比的silverlight我感觉到有点力不从心.除去silverlight第一次运行要安装Runtime不说,产品不可能只运行在 ...
- MongoDB数据库的主从配对与迁移示例
数据中心在运行中有可能遇到各种硬件.电力.网络故障等问题,需要设计良好的系统来隔离,尽量减少对上层应用的影响,持续对外提供服务:一旦发生业务中断,也应尽快恢复.通过主从备份设计,在主应用系统发生故障时 ...
- php static延迟静态绑定
如果你是一个懒惰的程序员,你看到以下代码可能会恼火 abstract class U{ } class u1 extends U{ public static function create(){ r ...
- 【PHP开源产品】Ecshop的商品筛选功能实现分析之一
一.首先,说明一下为什么要对category.php文件进行分析. 原因如下: ①个人对商城类商品筛选功能的实现比较好奇: ②对商城中关于商品的数据表设计比较感兴趣.(该功能涉及到与数据库的交互,而且 ...
- phpcms后台部分修改
1.后台登陆前提示信息取消及成功后提示信息取消. (1)后台登陆前提示信息取消 phpcms\modules\admin\classes\admin.class.ph ...
- DevExpress汉化(WinForm)
/* *隔壁老王原创,2013-09-21,转载请保留本人信息及本文地址. *本文地址:http://wallimn.iteye.com/blog/1944191 */ 最简单的方式就是使用汉化资源, ...
- 第十八章 数据访问(In .net4.5) 之 I/O操作
1. 概述 本章内容包括 文件操作.流操作.读写网络数据 以及 异步I/O操作. 2. 主要内容 2.1 文件操作 ① 使用 Drive 和 DriveInfo 访问磁盘信息. DriveInfo[] ...
- 使用supervisor的一些注意事项
一直都有在使用supervisor来管理linux上的服务进程.最近有同事说有某服务貌似有问题,让上去检查一下.上去以后发现某服务反应的确很慢,所以就用supervisor重启一下.但是重启的时候就发 ...
- ruby on rails 实战(一)
通过ruby on rails 一步一步搭建个人站点,涉及到的技术有:ruby,rails,javascript,jquery 操作系统:win7 IDE: rubymine 5.4. 第一步,下载安 ...