页面弹出框

最新推荐文章于 2023-03-24 20:05:31 发布

凡人·没有梦

最新推荐文章于 2023-03-24 20:05:31 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： html 页面弹出框

本文链接：https://blog.youkuaiyun.com/pleasurehappy/article/details/45460543

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现自定义弹窗的方法。通过设置遮罩层和弹窗的样式，结合JavaScript控制显示隐藏，使得页面中的指定元素可以触发弹窗展示，同时确保遮罩层覆盖背景内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、将下面两个div放到body中的任意位置
     a标签用来显示弹出框
<div class="popFrame">
      <a href="#">ddddddddddd</a>
</div>
<div class="shade"></div>
<a id="btn">显示弹出框</a>
2、上面div 的样式
.shade{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.55);
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	display:none;
}
.popFrame{
	width:400px;
	height:400px;
	background:#fff;
	border:1px solid #ccc;
	top:20%;
	left:36%;
	position:absolute;
	display:none;
}

3、javascript代码
$(function(){
//获取页面的宽度 高度 即 遮罩的高度和宽度
var height = $(document).height();
var width = $(document).width();
//获取页面中最大的z-index
var maxZ = Math.max.apply(null,$.map($('body > *'),function(e,n){if($(e).css('position') == 'absolute')return parseInt($(e).css('z-index')) || 1;}));
$('div.zhezhao').css({'width':width,'height':height,'z-index':maxZ+1});
$('div.tanchuan').css({'z-index':maxZ+2});
$('#btn').click(function(){
		$('div.shade').show();
		$('div.popFrame').show();
	});
});

可以看到 div.popFrame中的a标签是可以点击的页面中的其他标签都在遮罩的后面不能触发事件