<div class="mask-box"></div>
<div class="dialog-box">
d窗内容
</div>
通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为d窗容器，里面写d窗的内容。
通过控制样式，切换 display:block display: none实现点击出现、点击关闭d窗。
.mask-box{
/* 切换 display:block display: none*/
position: fixed
left: 0
right: 0
top: 0
bottom: 0
background:rgba(0,0,0,0.7)
z-index: 98
}
.dialog-box{
/* 切换 display:block display: none*/
position: fixed
left: 50%
top: 50%
transform: translate(-50%,-50%)
width: 300px
height: 200px
background: #fff
/* 按实际情况 设置z-index */
z-index: 98
}
首先根据需求我们需要一个按钮，一个d出窗口层；\x0d\x0aOK，废话不多说；\x0d\x0a按钮就用一个基本的：\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分：\x0d\x0a首先需要引入一个JS库，版本自己定义：\x0d\x0a然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a}) 回答于 2022-11-16实现原理：display：none/block 把代码直接复制看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0
margin: 0
}
.firstBox h5 {
font-size: 30px
color: #000
font-weight: 700
}
.firstBox table {
border: 1px solid #E6E6E6
margin: 15px 0px
}
.firstBox table thead {
background: #E6E6E6
}
.firstBox table tr td {
width: 150px
text-align: center
}
.firstBox button {
width: 100px
height: 40px
background: #E6E6E6
border: 1px solid #C7D3E6
text-align: center
line-height: 40px
font-size: 16px
color: #000
cursor: pointer
}
#twoBox {
margin: 20px 0px 0px
background: #E6E6E6
height: 250px
width: 310px
position: relative
display: none
}
#twoBox .twoBox_lever {
width: 290px
height: 230px
background: #fff
border: 1px solid #ccc
border-radius: 5px
position: absolute
right: 0
top: 0
left: 0
bottom: 0
margin: auto
}
.twoBox_lever_two {
width: calc(100% - 10px)
height: calc(100% - 10px)
padding: 5px
}
.twoBox_lever_two .two_title {
width: 100%
height: 40px
background: #E6E6E6
border: 1px solid #ccc
border-radius: 5px
}
.twoBox_lever_two .two_title p {
font-size: 16px
color: #000
line-height: 40px
padding-left: 10px
font-weight: 700
}
.twoBox_lever_two form {
width: calc(100% - 20px)
margin: 10px
border-bottom: 1px solid #ccc
height: calc(100% - 100px)
}
.twoBox_lever_two form input {
height: 20px
line-height: 20px
padding: 0px 10px
margin: 5px
cursor: pointer
}
.twoBox_lever_two .two_footer {
height: 40px
text-align: right
padding-right: 10px
}
.twoBox_lever_two .two_footer button {
height: 30px
background: #E6E6E6
border: 1px solid #C7D3E6
text-align: center
line-height: 30px
font-size: 16px
color: #000
cursor: pointer
}
.twoBox_lever_two .two_footer button:first-of-type {
width: 120px
padding: 0px 10px
}
.twoBox_lever_two .two_footer button:last-of-type {
width: 50px
}
.show {
display: block !important
}
</style>
</head>
<body>
<div style="margin:10px">
<!-- 第一部分 -->
<div class="firstBox">
<h5>已有的用户 ：</h5>
<table>
<thead>
<tr>
<th>名字</th>
<th>邮箱</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td>xingtuan@qq.com</td>
<td>xingtuan</td>
</tr>
</tbody>
</table>
<button id="button">创建新用户</button>
</div>
<!-- 第二部分 -->
<div id="twoBox">
<div class="twoBox_lever">
<div class="twoBox_lever_two">
<div class="two_title">
<p>创建新用户</p>
</div>
<form>
<label style="float:left">名字：
<input type="text" placeholder="请输入名字">
</label>
<label style="float:left">邮箱：
<input type="text" placeholder="请输入邮箱">
</label>
<label style="float:left">密码：
<input type="password" placeholder="请输入密码">
</label>
</form>
<div class="two_footer">
<button>创建一个用户</button>
<button>取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
document.getElementById("button").onclick = function () {
document.getElementById("twoBox").classList.add("show")
}
}
</script>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）