JS模态对话框
2021-03-11 04:31
标签：javascrip put color show script har body 元素 index 思路 1.界面点击按钮 JS模态对话框 标签：javascrip put color show script har body 元素 index 原文地址：https://www.cnblogs.com/tanzizheng/p/12844955.html
模态框1
2.遮罩层
3.带确定按钮等的一个小页面DOCTYPE html>
html>
head>
title>title>
meta charset="utf-8">
style type="text/css">
.content {
height: 1080px;
background-color: pink;
}
.shade {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
}
.model {
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide {
display: none;
}
style>
head>
body>
div class="content">
button onclick="func()">showbutton>
hello world
div>
div class="shade hide">div>
div class="model hide">
button onclick="cancel()">showbutton>
div>
script type="text/javascript">
function func(argument) {
// 界面按钮点击时取消隐藏的元素（显示小页面和遮罩层）
var ele_shade = document.getElementsByClassName(‘shade‘)[0]
ele_model.classList.remove("hide")
var ele_model = document.getElementsByClassName(‘model‘)[0]
ele_shade.classList.remove("hide")
}
function cancel() {
// 点击小页面按钮时隐藏小页面和遮罩层
var ele_shade = document.getElementsByClassName("shade")[0]
var ele_model = document.getElementsByClassName("model")[0]
ele_model.classList.add("hide")
ele_shade.classList.add("hide")
}
script>
body>
html>
模态框2
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style>
.c1{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0f0f0f;
opacity: 0.5;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: #f9f9f9;
position: fixed;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -250px;
z-index: 10;
}
.hide{
display: none;
}
style>
head>
body style="margin: 0;">
div>
input type="button" value="添加" onclick="ShowMod();">
div>
div id=‘id1‘ class="c1 hide">
div>
div id=‘id2‘ class="c2 hide">
p class="=c3">input type="text" placeholder="username">p>
p>input type="password" placeholder="password">p>
p>input type="button" value="取消" onclick="HideMod();">
input type="button" value="确定">p>
div>
script>
function ShowMod() {
document.getElementById(‘id1‘).classList.remove(‘hide‘);
document.getElementById(‘id2‘).classList.remove(‘hide‘);
}
function HideMod() {
document.getElementById(‘id1‘).classList.add(‘hide‘);
document.getElementById(‘id2‘).classList.add(‘hide‘);
}
script>
body>
html>