用js实现一个html弹出图层
用js实现一个弹出图层，具体效果：
点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。所有代码不分开、放在一个html中显示。
以下是一个简单的JavaScript代码示例：
<!DOCTYPE html>
<html>
<head>
<title>弹出图层</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-align: center;
}
h2 {
margin-top: 0;
}
input[type="text"] {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #1c7cd6;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #15549a;
}
.close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.close:hover {
background-color: #999;
}
</style>
</head>
<body>
<button id="open-popup">打开弹出图层</button>
<div class="overlay" id="overlay">
<div class="popup">
<h2>弹出图层</h2>
<input type="text" placeholder="请输入内容">
<button>提交</button>
<div class="close" id="close-popup">×</div>
</div>
</div>
<script>
var openPopupButton = document.getElementById("open-popup");
var closePopupButton = document.getElementById("close-popup");
var overlay = document.getElementById("overlay");
openPopupButton.onclick = function() {
overlay.style.display = "block";
document.body.style.overflow = "hidden";
}
closePopupButton.onclick = function() {
overlay.style.display = "none";
document.body.style.overflow = "auto";
}
</script>
</body>
</html>
该代码使用了CSS样式，包含一个按钮和一个弹出图层。单击按钮将调用JavaScript函数来显示图层，并将背景页面设为不可点击状态。关闭按钮也是通过JavaScript函数来实现的，当用户单击关闭按钮时，它将隐藏弹出框并将背景页面状态还原。如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。
- 点赞
- 收藏
- 关注作者
评论（0）