jquery 点击标题弹出内容和遮罩层后,点击关闭按钮怎么关闭
<divid="layer"></div><divclass="pop_box"><dl><dt>标题1</dt><ddclass="box">内容1<ahref="#"...
<div id="layer"></div>
<div class="pop_box">
<dl>
<dt>标题1</dt>
<dd class="box">内容1<a href="#" class="close">关闭</a></dd>
</dl>
<dl>
<dt>标题2</dt>
<dd class="box">内容2<a href="#" class="close">关闭</a></dd>
</dl>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.pop_box dl').click(function () {
var text = $(this).find('dd').show();
$('#layer').show()
});
});
</script>
<style type="text/css">
*{ margin:0; padding:0;}
.pop_box{ position:relative ;}
.pop_box dl dt{ width:150px; float:left; }
.box{ width:500px; height:300px; background:#fff; border:2px solid #ddd; position:fixed;z-index:2; left:30%; top:30%; display:none;}
#layer{ width:100%; height:100%; position:fixed; background:#ff0000; left:0; top:0; z-index:1; position:absolute; left:0; top:0; display:none; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.close{ width:60px; height:30px; line-height:30px; background:#ff0000; color:#fff; display:block; text-align:center; margin:100px auto;}
</style> 展开
<div class="pop_box">
<dl>
<dt>标题1</dt>
<dd class="box">内容1<a href="#" class="close">关闭</a></dd>
</dl>
<dl>
<dt>标题2</dt>
<dd class="box">内容2<a href="#" class="close">关闭</a></dd>
</dl>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.pop_box dl').click(function () {
var text = $(this).find('dd').show();
$('#layer').show()
});
});
</script>
<style type="text/css">
*{ margin:0; padding:0;}
.pop_box{ position:relative ;}
.pop_box dl dt{ width:150px; float:left; }
.box{ width:500px; height:300px; background:#fff; border:2px solid #ddd; position:fixed;z-index:2; left:30%; top:30%; display:none;}
#layer{ width:100%; height:100%; position:fixed; background:#ff0000; left:0; top:0; z-index:1; position:absolute; left:0; top:0; display:none; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.close{ width:60px; height:30px; line-height:30px; background:#ff0000; color:#fff; display:block; text-align:center; margin:100px auto;}
</style> 展开
2个回答
展开全部
$(".close").click(function(){
$(this).parent("dd").hide();
$('#layer').hide();
})
追问
加上了,还关闭不了
追答
你这个问题很奇怪啊,一开始说我还不信,去试了一下,确实不好使,在我其他项目都好使,你这样,先用:
$(".close").click(function(){
$(this).parent("dd").fadeOut();
$('#layer').fadeOut();
})
这个也会使他消失,但有个特效,你不想要可以在fadeOut()里面填个0,变成:fadeOut(0)
修改:
上面说的作废你改成hide(1),这个我也不知道为啥,反正设成1毫秒内执行完毕就行了……
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |