NO.63 点击弹出遮罩层，层可以拖动，select可以挡住

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< link  type ="text/css"  rel ="stylesheet"  href ="http://image.yihaodianimg.com/statics/global/css/global_site_simple.css?142723" >
< script  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"  type ="text/javascript" ></ script >
< title > 无标题文档 </ title >
< style >
.popbox { width : 450px ;  border : 1px solid #B3B3B3 ; position : absolute ; left : 50% ;  margin-left : -225px ;  background : #FFF ;  z-index : 9999 ; -moz-box-shadow :  3px 3px 4px #ccc ; -webkit-box-shadow :  3px 3px 4px #ccc ; box-shadow :  3px 3px 4px #ccc ;  filter :  progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=4) ; }
.pop_tit { background-color : #900 ;  color : #FFF ;  height : 27px ;  line-height : 27px ;  padding : 0px 10px ;  cursor : move ; }
.pop_tit a { background : url(http://image.yihaodianimg.com/images/v2/ad/close_bg.jpg) no-repeat right 7px ;  float : right ;  color : #FFF ;  padding-right : 17px ; }
.pop_tit a:hover {  color : #FFF ; }
.pop_content { padding : 10px 20px ;  background-color : #FFF ; }
.btn_box { text-align : center ;  margin : 10px 0px ; }
.btn_box a { background : url(images/sprites.gif) no-repeat ;  width : 55px ;  height : 27px ;  display : inline-block ;  color : #FFF ;  line-height : 27px ;  text-align : center ; } .btn_box a:hover { text-decoration : none ;  color : #FFF ; }
.sure {  background-position : 0px 0px ; }
.cancel {  background-position :  -55px 0px ; }
/* 遮罩层 */
.mask { z-index : 999 ; background-color : #000 ; position : absolute ; top : 0px ;  left : 0px ; filter : alpha(opacity=10) ; -moz-opacity : 0.1 ; -khtml-opacity :  0.1 ; opacity :  0.1 ; }
.ifm { position : absolute ;  z-index : 99 ; position : absolute ; top : 0px ; left : 0px ; filter : alpha(opacity=0) ; -moz-opacity : 0 ; -khtml-opacity :  0 ; opacity : 0 ; }
</ style >
</ head >
 
< body >
< input  type ="text"   />< span  style ="color:#F00;" > 哈哈哈哈哈 </ span >< input  type ="button"  value ="显示弹出层"  id ="show" />< select >< option > 我是下拉框 </ option ></ select >
< p  style ="height:2500px;" ></ p >
< iframe  class ="ifm" ></ iframe >
< div  class ="mask" ></ div >
< div  class ="popbox" >
     < p  class ="pop_tit" >< a  href ="###"  id ="close" > 关闭 </ a > 请输入邮政编码进行地区查询 </ p >
     < div  class ="pop_content" > 我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦
     </ div >
     < div  class ="btn_box" >
         < a  href ="###"  class ="sure" > 确 定 </ a >
         < a  href ="###"  class ="cancel" > 取 消 </ a >
     </ div >
</ div >
</ body >
< script >  
$( function (){
     var  windowHeight  =  document.documentElement.clientHeight;
     var  windowWidth  =  document.documentElement.clientWidth;
     var  htmlHeight  =  $(document).height();
     var  popupHeight  =  $( " .popbox " ).height();
    $( " .popbox " ).css({
         " top " : windowHeight / 2-popupHeight / 2
    });
    $( " .mask " ).css({
         " height " : htmlHeight,
         " width " : windowWidth
    });
    
    $( " .ifm " ).css({
         " height " : htmlHeight * 0.99 ,
         " width " : windowWidth * 0.99
    });
    
    $( " .popbox " ).hide();
    $( " .ifm " ).hide();
    $( " .mask " ).hide();
    $( " #show " ).click( function (){
        $( " .popbox " ).show();
        $( " .ifm " ).show();
        $( " .mask " ).show();
    })
    $( " #close " ).click( function (){
        $( " .popbox " ).hide();
        $( " .ifm " ).hide();
        $( " .mask " ).hide();
    })
    
     /* 拖动 */
     var  _move = false ; // 移动标记
     var  _x,_y; // 鼠标离控件左上角的相对位置
    $( " .pop_tit " ).click( function (){
         // alert("click");//点击（松开后触发）
        }).mousedown( function (e){
        _move = true ;
        _x = e.pageX - parseInt($( " .popbox " ).css( " left " ));
        _y = e.pageY - parseInt($( " .popbox " ).css( " top " ));
        $( " .popbox " ).fadeTo( 20 ,  0.25 ); // 点击后开始拖动并透明显示
    });
    $(document).mousemove( function (e){
         if (_move){
             var  x = e.pageX - _x; // 移动时根据鼠标位置计算控件左上角的绝对位置
             var  y = e.pageY - _y;
            $( " .popbox " ).css({top:y,left:x}); // 控件新位置
        }
    }).mouseup( function (){
        _move = false ;
        $( " .popbox " ).fadeTo( " fast " ,  1 ); // 松开鼠标后停止移动并恢复成不透明
      });
})
</ script >
</ html >

转载于:https://www.cnblogs.com/00fairy00/archive/2011/08/04/2127242.html