用js实现一个弹出图层 |
您所在的位置：网站首页 › 用js写html › 用js实现一个弹出图层 |
用js实现一个弹出图层
|
用js实现一个弹出图层，具体效果： 点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。所有代码不分开、放在一个html中显示。 以下是源码： 弹出图层 .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代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。 效果： 
|
【本文地址】
今日新闻 |
推荐新闻 |