弹出框，点击按钮显示和消失，点击空白处消失

1、点击按钮，弹出弹出框，再次点击消失

html

<header>
    <i class="dynamicDetaHIcon">按钮i>
header>
<div class="dynamicPopConHide">内容div>

js

$('.dynamicDetaHIcon').click(function() {
    if($('.dynamicPopConHide').css('display') =="none") {
        $('.dynamicPopConHide').show();
    }else {
        $('.dynamicPopConHide').hide();
    }
});

2、点击空白处弹出框消失

$('.dynamicPopConHide').siblings('div').click(function() {
    $('.dynamicPopConHide').hide();
});

 

==============遮罩层 css=============

.dailyMasklayer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #000000;
    filter: alpha(opacity=30);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    display: none;
    //bgckground-color : #363636;
}

============案例=============

点击下拉箭头，底部弹出div，并显示遮罩层

html

<div>
    <div>
         <i class="mui-icon mui-icon-arrowdown mydapulldown 1">i>
    div>
div>

<div class="dailyMasklayer">div>

<div class="bottomWindow">
    <ul>
        <a href="./daily-publish.html"><li>编辑li>a>
        <a class="dailyDelete"><li>删除li>a>
        <a href="" ><li class="dailyCancel">取消li>a>
    ul>
div>    

css

/* 底部弹出框 */
.bottomWindow {
    width: 100%;
    position: absolute;
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    z-index: 5;
}
.bottomWindow a{
    display: block;
    height: 45px;
    background-color: #fff;
    border-top: 1px solid #D7D7D7;
    font-size: 2.2rem;
    text-align: center;
    line-height: 45px;
    color: #000;
}
/* 取消按钮 */
.dailyCancel {
    background-color: #C9C9C9;
}
/* 遮罩层样式见上方 */

js

$(function() {    
    // 获取下拉箭头
    var mydapulldownItem = $('.mydapulldown');
    //获取底部弹出层
    var bottomWindowS = $('.bottomWindow')
    //点击下拉箭头
    $('.mydapulldown').click(function() {
        console.log(this)
        var that = this
        for(var i=0; i) {
            $(mydapulldownItem[i]).parent().parent().parent().siblings('div').css('display','none');
            $('.dailyMasklayer').css('display','none');
        }
        $(this).parent().parent().parent().siblings('div').css('display','block');
        $('.dailyMasklayer').css('display','block')
        //点击取消按钮
        $('.bottomWindow li:last-child').click(function() {
            $(mydapulldownItem).parent().parent().parent().siblings('div').css('display','none');
            $('.dailyMasklayer').css('display','none');
        });
        //点击删除按钮
        $('.dailyDelete').click(function() {
            $(that).parent().parent().hide(300);
        })
    });
});

 

转载于:https://www.cnblogs.com/dxt510/p/7607843.html