原生js创建模态框（摘自：东窗凝残月链接：https://www.cnblogs.com/dcncy/p/9076937.html）

发布时间：2023-09-06 01:57责任编辑：顾先生关键词：js http


<!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>

原文地址：https://www.cnblogs.com/anrangesi/p/9106248.html

原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）

知识推荐

原生js创建模态框（摘自：东窗凝残月链接：https://www.cnblogs.com/dcncy/p/9076937.html）