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

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.length; 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); }) }); });