Home >Web Front-end >JS Tutorial >How to implement a simple pop-up box using JS
This article mainly analyzes how to use JS to implement a minimalist pop-up box. Friends who need it can refer to it. I hope it can help everyone. Let’s take a look with the editor below.
There are two p’s forming a pop-up box. The level of two p's is brotherhood.
One p is to block the content behind
The second p is In order to display the actual content of the popup box
##HTML part
##!-- 这个是用来遮罩的 --><p id="modelp"></p><!-- 这个是用来展示弹框内容的 --><p id="model"> <p style="float: right;height: 20px; width: 20px;border-radius: 50%; border: 2px solid red;text-align: center;" onclick="closeModel()"> X </p> 弹出窗口</p>
CSS part
// 遮挡部分CSS#modelp { height: 100%; width: 100%; // 页面定位到最上面 position: absolute; top:0; left:0; background: silver; // 透明度这样能看到后面的内容效果真实一些 opacity:0.8; // 遮挡级别最好高一些,防止别的内容会突然出现在你的弹出层上面,这就尴尬了。 z-index: 99; } // 弹出框内容CSS #model { width: 300px; height: 200px; background: #959FA9; border-radius: 10px; padding: 15px; position: absolute; top: 200px; left: 42%; z-index: 99; }
JavaScript part
// 页面一进入就打开了弹出框。所以直接遮挡// 此处是用来解决如果你的页面过大会出现滚动条,这样遮罩层只能遮挡你的可见部分滚动内容无法折腾的问题。document.body.style.overflow = 'hidden';/** * 关闭弹出框的功能 */function closeModel() { document.getElementById("model").style.display = 'none'; document.getElementById("modelp").style.display = 'none'; // 不遮挡后面的内容将body设置为原始样式,也就是实现可滚动 document.body.style.overflow = 'auto'; }
The above is the detailed content of How to implement a simple pop-up box using JS. For more information, please follow other related articles on the PHP Chinese website!