原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#pageMask {
visibility: hidden; //使pageMask元素不可见
position: absolute; //定位pageMask元素
left: 0px; //定位pageMask元素
top: 0px; //定位pageMask元素
width:100%;
height:100%;
text-align: center; //文本对其方式
z-index: 1100; //指定一个元素的堆叠顺序
">#333;//设置背景色
opacity: 0.6; //设置元素的透明度级别
}
#ModalBody{
background: white; //设置背景
width: 50% !important;
height: 50% !important;
position:absolute; //定位ModalBody元素
left: 25%;
top: 25%;
z-index: 1101; //指定元素的堆叠顺序
border: 1px solid; //边框1px的实线
display: none; //不可见
}
#closeModalBtn{
position: static; //静态定位的元素不会受到top,bottom,left,right影响
margin-top: 5px; //设置closeModalBtn元素的上部边距
margin-right: 1%; //右部边距
float: right; //右侧移动
font-size: 14px; //字体大小
background: #ccc000;
cursor: pointer; //设置光标形态，pointer光标呈现为指示链接的指针（一只手）
}
</style>
</head>
<body>
<div class="content">
<h1>Test Modal</h1>
<div id="pageMask"></div> <!--遮盖层-->
<button class="showModalBtn" id="showModalBtn">Btn</button>
<div> <!--主页面-->
Page Content...
</div>
</div> <div id="ModalBody"> <!--模态框-->
<button id="closeModalBtn" style="display: none;">Close</button>
<div>Test Modal Body...</div>
</div> <script>
window.onload = function(){
expandIframe();
}
function expandIframe(){
var mask = document.getElementById("pageMask");
var modal = document.getElementById("ModalBody");
var closeBtn = document.getElementById("closeModalBtn");
var btn = document.getElementById("showModalBtn"); btn.onclick = function(){ modal.style.display = (modal.style.display == "block")? "none" : "block"; closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block"; mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible"; } closeBtn.onclick = function(){ modal.style.display = (modal.style.display == "block")? "none" : "block"; closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block"; mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible"; } }</script></body></html>
原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）的更多相关文章
- 原生js创建模态框
1.效果图如下: 2.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 原生js：click和onclick本质的区别（转https://www.cnblogs.com/web1/p/6555662.html）
原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...
- 使用原生js创建自定义标签
使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Python测试开发-创建模态框及保存数据
Python测试开发-创建模态框及保存数据 原创: fin 测试开发社区 前天 什么是模态框? 模态框是指的在覆盖在父窗体上的子窗体.可用来做交互,我们经常会看到模态框用来登录.确定等等,到底是怎 ...
- 教你使用HTML5原生对话框元素，轻松创建模态框组件
HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...
- Js实例——模态框弹出层
1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...
- js创建弹框（提示框，待确认框）
;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...
- 原生js 复选框全选案例
注 : 本文章主要写功能 代码示例 : <body> <input type="checkbox" id="che" /><br& ...
- 原生js登录创建cookie
原生js创建cookie,功能:点击登录按钮时,将用户名.密码存为cookie:页面再次加载时,自动读取cookie中的用户名.密码. <html><head><titl ...
随机推荐
- arch Linux（二）
配置你的基本系统 下列是基于该视频4:40s的流水- 切换到普通用户: [root@eric-laptop ~]# su eric 查看系统信息: [eric@eric-laptop root]$ n ...
- Thread的中断机制(interrupt)
先看收集了别人的文章,全面的了解下java的中断: 中断线程 线程的thread.interrupt()方法是中断线程,将会设置该线程的中断状态位,即设置为true,中断的结果线程是死亡.还是等待新的 ...
- Python下探究随机数的产生原理和算法
资源下载 #本文PDF版下载 Python下探究随机数的产生原理和算法(或者单击我博客园右上角的github小标,找到lab102的W7目录下即可) #本文代码下载 几种随机数算法集合(和下文出现过的 ...
- jQuery 省份选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- java基础学习之接口
接口可以说是一个特殊的抽象类,接口里的方法都是抽象方法, 接口的特点: 1.一个类可以实现多个接口,也可以在继承一个类后继续实现多个接口(多实现间接支持了类的多继承) 2.接口可以继承另一个接口,并且 ...
- Hadoop学习笔记03_Hive练习
Apache Hive是提供了一种数据映射去读取文本数据,以及提供了类SQL的语句来执行MapReduce. 也就是一种更简化操作的MR. 之前的练习是跟着视频学的hive-1.2.2 而这几天自己练 ...
- 团队项目（MVP------新能源无线充电管理网站）（个人任务3）
现在我们组的项目已经完成了,之前做的欢迎界面已经废弃掉了,于是我重新制作了一个欢迎界面,主要是分为了团队介绍,充电商品的介绍,现在充电新闻的发展,解决方案,成功案例.其中产品里面又有两个商品的售卖页, ...
- python day28--json,pickle,hashlib,logging
一.json格式的限制 1.json格式的key必须是字符串数据类型,如果是数字dumps后会被转为字符串. # dic = {1:2,3:4} # str_dic = json.dumps(dic) ...
- nginx的变量参数 详解
$args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...
- Vue2.0
Vue 1.0到2.0的变化: 1.在每个组件的模板中,不再支持片段代码 组件中的模板: 之前: <template> <h3我是组件<strong>我是加粗模板< ...