JavaScript实现模态对话框实例

更新时间：2020-09-30 10:36:01 作者：startmvc

这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细，对大

这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>dialogue</title>
 <style>
 *{
 margin: 0;
 }
 .hide{
 display: none;
 }
 #div1{
 height: 2000px;
 background-color: #b4b4b4;
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 }
 #div2{
 /*display: none;*/
 background-color: red;
 opacity: 0.1;
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

 }
 #div3{
 /*display: none;*/
 height: 200px;
 width: 200px;
 z-index: 1002;
 background-color: crimson;
 position: absolute;
 top: 50%;
 left:50%;
 margin-left: -100px;
 margin-top: -100px;
 }
 </style>
</head>
<body>
<div id="div1">
 <input type="button" value="click" onclick="show()">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
 <input type="button" value="cancel" onclick="cancel()">
</div>

<script>
 function show() {
 var ele = document.getElementsByClassName("div");
 for (var i = 0; i < ele.length; i++) {
 ele[i].classList.remove("hide");
 console.log(i);
 }
 }
 function cancel(){
 var ele=document.getElementsByClassName("div");
 for (var i=0;i<ele.length;i++){
 ele[i].classList.add(("hide"));
 }
 }

</script>
</body>
</html>

初始页面如下: