原生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 ...
随机推荐
- caffe生成deploy.prototxt文件
参考: http://blog.csdn.net/cham_3/article/details/52682479 以caffe工程自带的mnist数据集,lenet网络为例: 将lenet_train ...
- 获取当前页面url并截取所需字段
let url = window.location.href; // 动态获取当前url // 例: "http://i.cnblogs.com/henanyundian/web/app/# ...
- 如何设置IntelliJ IDEA智能感知支持Jsp内置对象
一.问题: 在IntelliJ IDEA 新建jsp页面,想通过内置对象获取查询参数,比如:request.getParameter("id"),虽然手动输入后能够运行成功,但是智 ...
- C++将数组的元素顺序随机打乱
参考: https://blog.csdn.net/cordova/article/details/52884399 https://zhidao.baidu.com/question/1604258 ...
- 算法-最通俗易懂的KMP算法详解
有些算法,适合从它产生的动机,如何设计与解决问题这样正向地去介绍.但KMP算法真的不适合这样去学.最好的办法是先搞清楚它所用的数据结构是什么,再搞清楚怎么用,最后为什么的问题就会有恍然大悟的感觉.我试 ...
- Eclipse中Server视图加载项目之后项目名后边有带括号的名字
用习惯了eclipse工具,因为某种原因需要修改项目名称.结果选择项目,按“F2”成功修改后,使用tomcat进行web发布时,选择“Add and Remove”,发现名字还是以前那个项目名称.即使 ...
- adb command not found / abd' 不是内部或外部命令,也不是可运行的程序 或批处理文件。最简易修改
此处提供最简易高效的方法 不需要添加.bash_profile 只需手动设置环境变量 1.打开环境变量设置页面:确保你ANDROID_HOME, JAVA_HOME已经设置好,我们针对abd的环境配置 ...
- GDT全局描述符表
GDT全局描述符表 什么是GDT全局描述符表 GDT全称为Global Descriptor Table,全局描述符表. 保护模式的寻址方式不在使用寄存器分段的方式直接寻址方式了.而采用的是使用GDT ...
- jquery常用实例
$("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollT ...
- layui布局器网站工具
http://layuiout.magicalcoder.com/magicaldrag-admin/drag