原生js创建模态框
1.效果图如下：
2.代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#pageMask {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align: center;
z-index: 1100;
background-color: #333;
opacity: 0.6;
}
#ModalBody{
background: white;
width: 50% !important;
height: 50% !important;
position:absolute;
left: 25%;
top: 25%;
z-index: 1101;
border: 1px solid;
display: none;
}
#closeModalBtn{
position: static;
margin-top: 5px;
margin-right: 1%;
float: right;
font-size: 14px;
background: #ccc0;
cursor: 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创建模态框的更多相关文章
- 原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Te ...
- 使用原生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 ...
- Bootstrap 模态框（Modal）插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
随机推荐
- Java 社区论坛 - Sym 1.5.0 发布
简介 Sym 是一个用 Java 写的实时论坛,欢迎来 体验!(如果你需要搭建一个企业内网论坛,请使用 SymX) 非常详细的 Sym 功能点脑图 如果你在搭建或者二次开发时碰到问题,欢迎加 Q 群 ...
- 自动生成了一本ES6的书
Item public class Item { private Integer id; private String name; public Integer getId() { return id ...
- 轻松应对IDC机房带宽突然暴涨问题
轻松应对IDC机房带宽突然暴涨问题! 1[提出问题] [实际案例一] 凌晨3:00点某公司(网站业务)的一个IDC机房带宽流量突然从平时高峰期150M猛增至1000M,如下图: 该故障的影响:直接导致 ...
- Windows Azure系列公开课 - 第一课：认识云计算
我们正在经历着一个前所未有的变革时代.信息技术的不断创新也推动着各行业的业务创新. 任何规模和类型的组织都需要拥抱最新的IT趋势才能保持竞争力与创新力,并关注自身的业务. 云计算的最终目标是将计算.服 ...
- MSSQL->serverlink[Oracle]
需求描述: SQL Server数据库连接Oracle数据库 条件准备: SQL Server数据库,SQL Server 2008R2 Oracle数据库,Oracle ...
- iOS设计模式 - 外观
iOS设计模式 - 外观 原理图 说明 1. 当客服端需要使用一个复杂的子系统(子系统之间关系错综复杂),但又不想和他们扯上关系时,我们需要单独的写出一个类来与子系统交互,隔离客户端与子系统之间的联系 ...
- [翻译] SVProgressHUD
SVProgressHUD https://github.com/TransitApp/SVProgressHUD SVProgressHUD is a clean and easy-to-use H ...