用js实现一个弹出图层，具体效果：

点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。所有代码不分开、放在一个html中显示。

以下是一个简单的JavaScript代码示例：

弹出图层

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

}

打开弹出图层

弹出图层

提交

×

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

}

该代码使用了CSS样式，包含一个按钮和一个弹出图层。单击按钮将调用JavaScript函数来显示图层，并将背景页面设为不可点击状态。关闭按钮也是通过JavaScript函数来实现的，当用户单击关闭按钮时，它将隐藏弹出框并将背景页面状态还原。如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。