简单Jquery遮罩层

最新推荐文章于 2026-01-08 16:39:17 发布

转载最新推荐文章于 2026-01-08 16:39:17 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/baibai62/blog/42330

文章标签：

#javascript #python #ViewUI

本文介绍如何使用HTML、CSS、JavaScript等前端技术创建一个动态弹窗，并通过jQuery实现弹窗的显示与隐藏功能，重点突出交互效果的实现。

2019独角兽企业重金招聘Python工程师标准>>>

Css代码

#brg { width: 100%; height: 100%; background: #333; position: absolute; top: 0; left: 0; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; position: absolute; top: 0; left: 0; display: none; } #showdiv { width: 100%; height: auto; position: absolute; left: 300px; top: 150px; z-index: 330; display: none; } #testdiv { width: 800px; height: auto; margin: 0 0; border: 1px solid #4d4d4d; background: #f2f2f2; } #close { width: 200px; height: 27px; line-height: 27px; font-size: 14px; font-weight: bold; border: 1px solid #4d4d4d; text-align: center; cursor: pointer; margin: 0 auto; background: #333; color: #fff; }

Html 代码

<div id="brg"> </div> <div id="showdiv"> <div id="close"> 关闭 </div> <div id="testdiv">

要显示的内容 </div> </div>

Jquery 代码

$(document).ready(function() { var bheight = document.body.clientHeight; $("#btnAdd").click(function() { $("#brg").css("display", "block"); $("#showdiv").css("display", "block"); $("#brg").css("height", document.body.scrollHeight); $("#showdiv").css("top", document.body.scrollTop + 100); }); $("#close").click(function() { $("#brg").css("display", "none"); $("#showdiv").css("display", "none"); }); });

转载于:https://my.oschina.net/baibai62/blog/42330