html点击按钮弹出窗口如何实现？

如图... 如图展开

 我来答

4个回答

#合辑# 面试问优缺点怎么回答最加分？

巨蟹座杏子
2019-10-29

知道答主

回答量：5

采纳率：0%

帮助的人：2.5万

我也去答题访问个人页

关注

展开全部

实现原理：display：none/block; 把代码直接复制看效果

<!DOCTYPE html>

<head>

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

<h5>已有的用户：</h5>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>xingtuan@qq.com</td>

<td>xingtuan</td>

</tr>

</tbody>

</table>

<button id="button">创建新用户</button>

</div>

<p>创建新用户</p>

</div>

<form>

<label style="float:left">名字：

</label>

<label style="float:left">邮箱：

</label>

<label style="float:left">密码：

</label>

</form>

<button>创建一个用户</button>

</div>

</body>

window.onload = function () {

document.getElementById("button").onclick = function () {

document.getElementById("twoBox").classList.add("show")

}

</script>

</html>

已赞过 已踩过<

评论收起

蓝橙互动
2019-12-26 · 做专业的h5开发服务商！

蓝橙互动

蓝橙互动-为互联网营销提供技术支持！

向TA提问

关注

展开全部

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

已赞过 已踩过<

评论收起

百度网友7282904
2019-10-29

知道答主

回答量：13

采纳率：0%

帮助的人：2.6万

我也去答题访问个人页

关注

展开全部

弹出框我一般用的都是 layui 前端框架去官网下载放到本地

已赞过 已踩过<

评论收起

匿名用户
2019-10-29

展开全部

百度js模态对话框.你会得到更优质的回答.

已赞过 已踩过<

评论收起

1条折叠回答

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

html网页制作 - 虎课网DW教程-高质量原创DW教程

html网页制作认准虎课网-案例式短视频教学网站，提供海量免费，高质量视频课程包括html网页制作，网页设计教程，UI设计教程，电商美工教程等。学设计，在虎课!

www.huke88.com广告

做网站用什么软件官方版免费下载最新软件海量游戏资源

做网站用什么软件，腾讯电脑管家软件中心集合软件下载，卸载，优化一体化工具，实时检测软件最新版本。收录万款正版软件，经过安全认证，软件管理更便捷!

guanjia.qq.com广告

华为云网站建设-一站式服务-打造高端网站

网站建设，华为云模板建站，3000+模板，60+行业覆盖，PC+移动自适应建站，仅需368元/年华为云建站，全程1v1管家式服务，不满意全额退，多端合一，全场景覆盖

www.huaweicloud.com广告

html点击按钮弹出窗口如何实现？

您可能关注的内容

其他类似问题

为你推荐：