点击div外部，隐藏该div

Do_It_Better

于 2019-06-27 16:40:48 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

分类专栏：功能实现 JQuery

本文链接：https://blog.youkuaiyun.com/chose_DoIt/article/details/93889028

功能实现同时被 2 个专栏收录

41 篇文章

订阅专栏

JQuery

12 篇文章

订阅专栏

本文探讨了使用jQuery实现遮罩层与获奖记录模块的交互设计，包括点击遮罩层隐藏获奖记录和遮罩层的功能实现。通过具体的代码示例，展示了如何在网页中创建一个响应式的遮罩层，并在用户操作时显示或隐藏特定的获奖记录模块。

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

	$(".black").click(function(){
							$(".winning-records").hide();
							$(this).hide();
							return false;
						})
						$(".winning-records").click(function(){
							return false;
						})

		<!-- 遮罩层 -->
				<div class="black">
				<!-- 获奖记录 -->
					<div class="winning-records">
						
					</div>
				</div>

.black{
	background: rgba(0,0,0,0.7);
	position:fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}

/*获奖记录*/
.winning-records{
	    background: url(../images/winning-records.png) no-repeat;
    width: 5.99rem;
    background-size: 100%;
    height: 6rem;
    position: fixed;
    top: 50%;
    z-index: 111;
    margin-top: -3rem;
    margin-left: -3rem;
    left: 50%;
	
}