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

html

     
    
      按钮
     
     
      内容
     

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

     
     
    
      
         
           
      
     
     
     
     
     
    
      
        
       
编辑        
       
删除        
       
取消    
      
     

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