彈出框，點擊按鈕顯示和消失，點擊空白處消失

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