1.案例需求
通过html,css和JavaScript,运用盒子的隐藏,实现弹窗的出现和隐藏。
2.编程思路
1.创建一个按钮,用来控制弹窗的弹出。
2.创建一个宽高均为100%的窗口盒子,做为弹窗背景。
3.在窗口盒子中创建一个盒子,作为弹窗的主体,并将"X"放在合适的位置用来关闭弹窗。
3.案例源码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>弹窗</title>
<link rel="stylesheet" href="css/chuang.css" />
</head>
<body>
<!-- 弹窗按钮 -->
<button id="Btn">打开弹窗</button>
<!-- 弹窗 -->
<div id="Chuang" class="chuang">
<!-- 弹窗内容 -->
<div class="chuang-content">
<!-- × 叉叉 -->
<span class="close">×</span>
<p>666</p>
</div>
</div>
<script src="js/chuang.js"></script>
</body>
</html>
css:
/* 弹窗 */
.chuang{
/* 默认为隐藏 */
display: none;
/* 固定定位 */
position:fixed;
/* 设置在最顶层 */
z-index: 1;
left:0;
top:0;
width: 100%;
height: 100%;
/* 滚动条 */
overflow: auto;
/* 窗口背景 */
background-color: rgba(0, 0, 0,0.4);
}
/* 弹窗内容 */
.chuang-content{
/* 弹窗背景颜色 */
background-color: #fefefe;
/* 弹窗外边距,水平居中 */
margin:15% auto;
/* 内边距,让文字与边框拉开距离 */
padding:20px;
/* 边框线 */
border: 1px solid #888;
/* 设置80%让弹窗的宽度根据页面大小进行变化 */
width: 80%;
}
/* 关闭按钮 */
.close{
color:#aaa;
/* 浮动到左边 */
float:right;
font-size: 28px;
}
/* hover-鼠标悬停时的样式
fcous-获得焦点时的样式
*/
.close:hover,.close:focus{
color: #000;
text-decoration: none;
/* 鼠标变手型 */
cursor:pointer;
}
// 获取弹窗
let chuangEle=document.getElementById('Chuang');
//获取按钮
let buttonEle=document.getElementById('Btn');
//获取span,用于关闭窗口
let closeEle=document.querySelector('.close');
//点击按钮打开弹窗
buttonEle.onclick=function(){
chuangEle.style.display='block';
buttonEle.style.display='none';
}
//点击span的'X'关闭弹窗
closeEle.onclick=function(){
chuangEle.style.display='none';
buttonEle.style.display='block';
}
//让用户在点击其他地方的时候也关闭弹窗
window.onclick=function(event){
//点击“弹窗内容”区域时不算是点击了窗口,不会关闭弹窗
if(event.target==chuangEle){
chuangEle.style.display='none';
buttonEle.style.display='block';
}
}
4.运行结果
弹窗打开前:
弹窗打开后:
5.补充(窗口出现动画)
可以在css中的窗口内容标签内加上
.chuang-content{
-webkit-animation-name: animatetop;
-webkit-animation-duration: 1s;
animation-name: animatetop;
animation-duration: 1s;
}
在css之前样式的后面加上
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
就会有窗口出现动画了,让窗口的出现看起啦更加平滑,不那么突兀。
6.技术细节
1.利用“display:none;"和"display:block"实现弹窗的出现和隐藏。
2.利用onclick事件来获取互动信息,实现弹窗的合理出现
3.当用户点击"Btn"按钮时,通过改变"chuangEle"的style.display属性来显示模态对话框。 当用户点击"close"按钮或模态对话框之外的任何地方时,通过改变"chuangEle"的style.display属性来隐藏模态对话框。
7.小结
今天展示了如何使用JavaScript和HTML来创建一个模态对话框(modal)。模态对话框是一个覆盖在网页上的透明层,通常用于显示重要信息或收集用户输入。此外,代码中还包含一些CSS样式来设置模态对话框的外观和布局。例如,设置了模态对话框的背景颜色、透明度、尺寸和位置等。总之,该代码示例演示了如何使用JavaScript和HTML创建一个基本的模态对话框,并展示了如何通过点击按钮来控制其显示和隐藏。