jquery 弹出窗口加拖动

浏览数：46 / 时间：2015年06月09日

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <script src="jquery.js"></script>
  7     <style>
  8         *{
  9             padding:0;
 10             margin:0;
 11         }
 12         .hide{
 13             display: none;
 14         }
 15         .popWindow{
 16             width:300px;
 17             height:300px;
 18             background:#abcdef;
 19             padding:2px;
 20             position: absolute;
 21             left:0;
 22             top:0;
 23             z-index: 2;
 24             /*border:2px solid #abcdef;*/
 25         }
 26         .popWindow h3{
 27             height:30px;
 28             line-height: 30px;
 29             cursor: pointer;
 30         }
 31         .popWindow span{
 32             float:right;
 33             font-size:12px;
 34             font-weight: normal;
 35             cursor: pointer;
 36         }
 37         .popWindow span a:hover{
 38             color:red;
 39         }
 40 
 41         .popWindow .content{
 42             height:270px;
 43             background:#fff;
 44         }
 45         .mask{
 46             background: #000;
 47             opacity: 0.4;
 48             position: absolute;
 49             left:0;
 50             top:0;
 51             z-index: 1;
 52         }
 53     </style>
 54 
 55 </head>
 56 <body>
 57 
 58 
 59     <a href="javascript:;" id="show">显示窗口</a>
 60 
 61     <div class="popWindow hide">
 62         <h3>标题<span>关闭</span></h3>
 63         <div class="content">内容</div>
 64     </div>
 65 
 66 
 67 </body>
 68 </html>
 69 <script>
 70  $(function(){
 71      var oBtn = $(‘#show‘);
 72      var popWindow =$(‘.popWindow‘);
 73      var oClose = $(‘.popWindow h3 span‘);
 74 
 75      //游览器可视区域的宽度
 76      var browserWidth = $(window).width();
 77      //游览器可视区域的高度
 78      var browserHeight = $(window).height();
 79 
 80      //弹出窗口的宽度
 81      var popWindowWidth = popWindow.outerWidth(true);
 82      var popWindowHeight = popWindow.outerHeight(true);
 83 
 84      //游览器滚动条
 85      var browserScrollTop = $(window).scrollTop();
 86 
 87      var browserScrollLeft = $(window).scrollLeft();
 88 
 89      //计算居中
 90      var positionLeft = browserWidth/2-popWindowWidth/2+browserScrollLeft;
 91      var positionTop = browserHeight/2-popWindowHeight/2+browserScrollTop;
 92 
 93      var oMask =‘<div class="mask"></div‘;
 94 
 95 
 96      //遮罩层的高宽
 97      var maskWidth = $(document).width();
 98      var maskHeight = $(document).height();
 99 
100 
101 
102      oBtn.click(function(){
103          var browserScrollTop = $(window).scrollTop();
104          var browserScrollLeft = $(window).scrollLeft();
105 
106          popWindow.show().animate({
107              ‘left‘:positionLeft+‘px‘,
108              ‘top‘:positionTop+‘px‘
109          },500);
110          $(‘body‘).append(oMask);
111          $(‘.mask‘).width(maskWidth).height(maskHeight);
112 
113      });
114 
115      $(window).resize(function(){
116          if(popWindow.is(‘:visible‘)){
117             browserWidth = $(window).width();
118             browserHeight = $(window).height();
119             positionLeft = browserWidth/2-popWindowWidth/2+browserScrollLeft;
120             positionTop = browserHeight/2-popWindowHeight/2+browserScrollTop;
121 
122              popWindow.animate({
123                  ‘left‘:positionLeft+‘px‘,
124                  ‘top‘:positionTop+‘px‘
125              },1);
126         }
127      });
128 
129 
130 
131          $(window).scroll(function(){
132 
133          if(popWindow.is(‘:visible‘)){
134              var browserScrollTop = $(window).scrollTop();
135              var browserScrollLeft = $(window).scrollLeft();
136              positionLeft = browserWidth/2-popWindowWidth/2+browserScrollLeft;
137              positionTop = browserHeight/2-popWindowHeight/2+browserScrollTop;
138          
139              popWindow.animate({
140                  ‘left‘:positionLeft+‘px‘,
141                  ‘top‘:positionTop+‘px‘
142              },500).dequeue();
143 
144 
145                  
146          }
147 
148              });
149 
150      $(‘.popWindow h3‘).mousedown(function(e){
151 
152          var positionDiv = $(‘.popWindow‘).offset();
153         var distenceX = e.pageX-positionDiv.left;
154         var distenceY = e.pageY-positionDiv.top;
155 
156         $(document).mousemove(function(e){
157             var x = e.pageX-distenceX;
158             var y = e.pageY-distenceY;
159             $(‘.popWindow‘).css({
160                 ‘left‘:x+‘px‘,
161                 ‘top‘:y+‘px‘
162             });
163         });
164 
165 
166         $(document).mouseup(function(){
167             $(document).unbind(‘mousemove‘);
168             $(document).unbind(‘mouseup‘);
169         });
170 
171 
172      });
173 
174      oClose.click(function(){
175          popWindow.hide();
176          $(‘.mask‘).remove();
177      });
178  });
179 </script>