当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

jQuery弹出层点击空白区域关闭弹出层

弹出层在目前的网页中应用及其广泛,比如:登录、注册、评论等等。一般弹出层与ajax一起使用,提升用户体验。弹出层的原理是正常状态下隐藏弹出层,使用css的display属性即可实现。需要弹出层时再将弹出层设为可见即可。

jQuery弹出层点击空白区域关闭弹出层

jQuery弹出层点击空白区域关闭弹出层

弹出后如果没有关闭按钮,那么如何在点击弹出层自身外的地方实现关闭的效果呢,使用jQuery很简单就能实现效果。

下面是实例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>jquery pop up</title>  
<script type='text/javascript' src='https://www.daimadog.com/wp-content/themes/dux/js/libs/jquery.min.js?ver=2.0'></script>

<script type="text/javascript">  
$(function(){  
    $("#testa").click(function(event){  
        var e=window.event || event;  
        if(e.stopPropagation){  
            e.stopPropagation();  
        }else{  
            e.cancelBubble = true;  
        }     
        $(".commentpopup-mask").show();  
 $(".commentpopup-box").show(); 
    }); 
 
    $(".commentpopup-box").click(function(event){  
        var e=window.event || event;  
        if(e.stopPropagation){  
            e.stopPropagation();  
        }else{  
            e.cancelBubble = true;  
        }  
    });  
    document.onclick = function(){    
$(".commentpopup-mask").hide(); 
 $(".commentpopup-box").hide();
    };  
})  
</script>  
<style type="text/css">  
.commentpopup-mask {

display:none;

    z-index: 100;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: #333;

    background-color: rgba(0,0,0,0.8);

}

.commentpopup-box {

display:none;

    z-index: 101;

    position: fixed;

    top: 50%;

    left: 50%;

    width: 600px;

    margin: -200px 0 0 -300px;

    background-color: #FFF;

    border-radius: 4px;

    padding: 30px;

}

.commentpopup-box .commentform {

    margin-bottom: 0;

}

.commentform {

    overflow: hidden;

    margin-bottom: 15px;

    position: relative;

}

.commentpopup-box .commentform [name="content"] {

    height: 161px;

}

.commentform .ipt {

    border-radius: 2px;

    margin-bottom: 10px;

    border-color: #e6e6e6;

}

.ipt {

    display: block;

    width: 100%;

    padding: 0.375rem 0.75rem;

    font-size: 0.875rem;

    line-height: 1.5;

    color: #55595c;

    background-color: #fff;

    background-image: none;

    border: 1px solid #ccc;

    border-radius: 0.1rem;

}

textarea {

    margin: 0;

    line-height: inherit;

    border-radius: 0;

    resize: vertical;

}

.commentform .btn {

    float: right;

}

.btn-primary {

    color: #fff;

    background-color: #0ae;

    border-color: #0ae;

}

.btn {

    display: inline-block;

    font-weight: normal;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    user-select: none;

    border: 1px solid transparent;

    padding: 0.375rem 1rem;

    font-size: 0.875rem;

    line-height: 1.5;

    border-radius: 0.1rem;

    -webkit-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

.commentform-text {

    color: #999;

    line-height: 35px;

    font-size: 12px;

    background-color: #f6f6f6;

    border-radius: 2px;

    padding: 0 15px;

    display: inline-block;

}

a {

    color: #576366;

    text-decoration: none;

}

</style>  




</head>  

<body>  

  <a id="testa"  href="#" mce_href="#">弹出窗口</a> 

<div class="commentpopup-mask" etap="commentpopup_close"></div>

<div class="commentpopup-box"><h4>回复 小刀IT的评论</h4><form class="commentform">

                    <textarea tabindex="10" placeholder="说点什么...

有关主题的售前售后问题请提交工单" name="content" class="ipt" cols="" rows="4"></textarea>

            <input type="button" value="提交回复" tabindex="11" class="btn btn-primary" etap="comment">

            <input type="hidden" name="post_id" value="6594">

            <input type="hidden" name="comment_id" value="1324">

                <div class="commentform-text">

            注:有关主题的售前售后请 <a target="_blank" href="https://www.daimadog.com">提交工单</a>        </div>

    </form></div>

</body>  

</html>

将上面的代码保存为html文件,在浏览器中打开即可查看效果。上面的评论框与css来自themebetter官网的评论。个人觉得还不错,不喜欢可以自行修改css。

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝