原生js创建模态框

1.效果图如下:

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>

本文转载于:猿2048➭https://www.mk2048.com/blog/blog.php?id=h00ii1aa&title=原生js创建模态框

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS节选——选择器

CSS&#xff0c;cascading style sheet&#xff0c;层叠样式表&#xff0c;请留意层叠概念。 css3为了区分伪类和伪元素&#xff0c;伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before…

vue.js基础知识篇(7):表单校验详解

目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vuerequire("vue"); var VueValidatorrequire("vue-validator"); Vue.use(VueValidator); 2.直接使用script标签引入vue.js 要下载vue-validator&#xff0c…

SQL数据库中临时表、临时变量和WITH AS关键词创建“临时表”的区别

原文链接&#xff1a;https://www.cnblogs.com/zhaowei303/articles/4204805.html SQL数据库中数据处理时&#xff0c;有时候需要建立临时表&#xff0c;将查询后的结果集放到临时表中&#xff0c;然后在针对这个数据进行操作。 创建“临时表”&#xff08;逻辑上的临时表&…

zbb20170626 myeclipse 2017 ci 构建 spring hibernate struts jar

转载于:https://www.cnblogs.com/super-admin/p/7081209.html

Java线程:保留的内存分析

本文将为您提供一个教程&#xff0c;使您可以确定活动应用程序Java线程保留Java堆空间的数量和位置。 将提供来自Oracle Weblogic 10.0生产环境的真实案例研究&#xff0c;以使您更好地理解分析过程。 我们还将尝试证明过多的垃圾回收或Java堆空间的内存占用问题通常不是由真正…

软件测试白皮书-等价类

设有一个档案管理系统&#xff0c;要求用户输入以年月表示的日期。假设日期限定在1990年1月~2049年12月&#xff0c;并规定日期由6位数字字符组成&#xff0c;前4位表示年&#xff0c;后2位表示月。现用等价类划分法设计测试用例&#xff0c;来测试程序的"日期检查功能&qu…

深入css布局 (1) — 盒模型 元素分类

深入css布局&#xff08;1&#xff09;—— 盒模型 & 元素分类 “ 在css知识体系中&#xff0c;除了css选择器&#xff0c;样式属性等基础知识外&#xff0c;css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。” 首先来列下大纲 盒模…

批改网禁止粘贴怎么破_教育部对家长批改作业表态了,明令禁止!你怎么看?...

互联网的发展&#xff0c;的确方便了现代人生活。视频电话、出去买东西你都不用带钱带卡&#xff0c;手机一扫就可以完成支付。很多中小学的家长都会建一个家长群&#xff0c;方便老师和家长的沟通。这个群可以说是家长和学校的桥梁和纽带&#xff0c;家长们为了支持老师的工作…

MapReduce算法–顺序反转

这篇文章是介绍MapReduce算法的系列文章的另一部分&#xff0c;该书在使用MapReduce进行数据密集型文本处理中找到。 先前的文章是Local Aggregation &#xff0c; Local Aggregation PartII和创建共现矩阵 。 这次我们将讨论阶数反转模式。 顺序反转模式利用的MapReduce来计算…

液压支架销轴力学计算分析研究_基于RFID射频精准定位的智能开采研究与应用...

一、项目背景近年来随着智能开采技术的不断发展&#xff0c;装备和新工艺不断更新换代,在智能开采中&#xff0c;对采煤机位置的精准定位是能否实现智能开采的关键&#xff0c;只有准确无误地获取煤机的准确位置&#xff0c;才能实现工作面的智能化开采&#xff0c;进而提高生产…

您是否能及时编译?

还记得上次被C开发人员嘲笑的时候吗&#xff1f; Java如此繁琐&#xff0c;以至于他们甚至都不会考虑使用这种语言&#xff1f; 在许多方面&#xff0c;这一概念仍然成立。 但是对于典型的用法&#xff08;在大型企业的骨干中&#xff09;&#xff0c;Java性能绝对可以与许多竞…

2d物理引擎01

我一直想做一个游戏&#xff0c;但一直感觉自己水平不够 想了想觉得不去做的话就永远做不出来 所以有了这个博文 01 我需要一个东西来显示&#xff0c;很显然h5中canvas是很好的选择 <!DOCTYPE html> <html><head><meta charset"utf-8" />&l…

Liferay Model Hints

这篇文章主要介绍如何通过model hint 来修改liferay builder service生成数据库表中默认字段的长度。 1.什么是Model Hints? 它是对liferay builder service生成的model类的基本提示. 2. 它在什么地方被定义的&#xff1f; portlet-model-hints.xml 3. 文件位置&#xff1f; /…

浏览器书签备份管理

1、火狐浏览器备份导出HTML文件&#xff1a; CtrlJ 书签 - 导入/导出 2、谷歌浏览器&#xff1a; 设置中 导入书签 转载于:https://www.cnblogs.com/AmbiguousMiao/p/8084721.html

选择您的收藏库

这真的是您应该烦恼的吗&#xff1f; java.util.ArrayList和java.util.HashMap从根本上有问题吗&#xff1f; 对于大多数源代码&#xff0c;答案是–不&#xff1b; 这些实现完全可以。 但是&#xff0c;一如既往&#xff0c;细节决定成败。 并存在情况下&#xff0c;当是内置…

里公式后面标号怎么对齐_你若会用Word里F4键,又何须加班到半夜?

F4键在Word里面表示重复上一个操作&#xff0c;但对于这个快捷键&#xff0c;你真的会操作吗&#xff1f;本期与大家分享这个神奇的F4键&#xff0c;助你高效工作。1、批量复制文本在一般情况下&#xff0c;我们是用CtrlC复制内容&#xff0c;CtrlV粘贴内容&#xff0c;但遇到特…

DshanMCU-R128s2 SDK 架构与目录结构

R128 S2 是全志提供的一款 M33(ARM)C906(RISCV-64)HIFI5(Xtensa) 三核异构 SoC&#xff0c;同时芯片内部 SIP 有 1M SRAM、8M LSPSRAM、8M HSPSRAM 以及 16M NORFLASH。 本文档作为 R128 FreeRTOS SDK 开发指南&#xff0c;旨在帮助软件开发工程师、技术支持工程师快速上手&am…

数据导出

数据导出和数据导入刚好是相反的&#xff0c;把逻辑反过来就可以了。 源码&#xff1a;https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/COM/DataToOut.aspx 效果&#xff1a; 然后勾选需要导出的数据&#xff0c;生成Excel 部分前台&#xff1a;…

spring 事务隔离级别和传播行为_Spring事务传播性与隔离性实战

一、事务传播性1.1 什么是事务的传播性事务的传播性一般在事务嵌套时候使用&#xff0c;比如在事务A里面调用了另外一个使用事务的方法&#xff0c;那么这俩个事务是各自作为独立的事务执行提交&#xff0c;还是内层的事务合并到外层的事务一块提交那&#xff0c;这就是事务传播…

前端为什么非要动静分离 说一下CDN托管的意义

大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存&#xff0c;因为浏览器缓存始终只是为了提升二次访问的速度&#xff0c;对于首次访问的加速&#xff0c;我们需要从网络层面进行优化&#xff0c;最常见的手段就是CDN&#xff08;Content Delivery Network&#xff0c;…