弹出框,点击按钮显示和消失,点击空白处消失
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);
})
});
});