回到顶部

鼠标点击区域外 弹框隐藏

时间:4年前   作者:Only_Have   浏览:126   [站内原创,转载请注明出处]

标签: jQuery  

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('dd').click(function(){
        $(this).siblings('dt').show();
    });
    $("html").click(function(e){
        if($(e.target).parents().hasClass('main') || $(e.target).hasClass('main')){
        
        }else{
            $(".hidden").hide();
        }
        
    });
});
</script>
</head>
<style>
*{ margin:0; padding:0;}
ul li{ list-style:none;}
body{ margin:0 auto; font-size:12px; height:2000px;}

.main{ width:1000px; height:500px; border:#000 1px solid; margin:20px auto; overflow:hidden;}

dl dt{ padding:100px; background:#000; margin:10px; display:none;}
dl dd{ border:#000 1px solid; margin:10px; padding:10px; cursor:pointer; text-align:center;}

</style>
<body>
<div class="main">
    <dl>
        <dt class="hidden"></dt>
        <dd>点击弹框</dd>
    </dl>
</div>

</body>
</html>

内容均为作者独立观点,不代表八零IT人立场,如涉及侵权,请及时告知。

评论努力加载中...
暂无评论
暂无评论

手机扫码阅读

热门相关

加载中...
关于我们   联系我们   申请友链   赞助记录   站点地图
© 2014 - 2017 www.80iter.com All Rights Reserved. 京ICP备14042174号-1
本站遵循 CC BY 4.0 协议,转载请注明出处 。