用css和js实现以下页面点击弹出一个小页面窗口
点击以后
点击按钮还能返回页面
接下来就开始利用js和css实现这个功能
首先先写一个页面,我就简单写成这样
通过display属性来控制里面的小页面
通过中间的span标签来控制小页面的display属性值
静态页面的代码
body,
html {
height: 100%;
margin: 0;
}
.main {
height: 100%;
background-color: red;
/* text-align: center; */
display: flex;
align-items: center;
justify-content: center;
}
.main span {
font-size: 18px;
color: #fff;
}
.cover {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.cover>div {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.cover div div {
width: 90%;
height: 70%;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
}
.cover div div span {
color: green;
font-size: 18px;
}
#box{
display: none;
}
</style>
<body>
<div class="main">
<span id="hide">点开</span>
</div>
<div class="cover" id="box">
<div>
<div>
<span id="Closehide">关闭</span>
</div>
</div>
</div>
</body>
接下来我们写JS的代码
首先获取标签盒子的id名
写一个点击事件,当点击“点击”点开的时候,盒子的display值改为block,这样就可以点击了
点击以后就会变成
接下来和上面的一样写一个点击事件,当我们点击关闭的时候让他消失掉
这样就做完啦!
最终代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body,
html {
height: 100%;
margin: 0;
}
.main {
height: 100%;
background-color: red;
/* text-align: center; */
display: flex;
align-items: center;
justify-content: center;
}
.main span {
font-size: 18px;
color: #fff;
}
.cover {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.cover>div {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.cover div div {
width: 90%;
height: 70%;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
}
.cover div div span {
color: green;
font-size: 18px;
}
#box{
display: none;
}
</style>
<body>
<div class="main">
<span id="hide">点开</span>
</div>
<div class="cover" id="box">
<div>
<div>
<span id="Closehide">关闭</span>
</div>
</div>
</div>
<script>
var box = document.getElementById('box');
var hide = document.getElementById('hide');
var CloseHide = document.getElementById('Closehide');
hide.onclick = function () {
box.style.display = "block";
}
Closehide.onclick = function(){
box.style.display = "none";
}
</script>
</body>
</html>