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 = thisfor(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);})});});
