js 弹窗的原型封装

2017-03-23 15:21:36   前端

  js弹窗   js封装实例  

根据上一篇JS 面向对象模式写了一个 弹框 小例子,不是很好,只是为了说明一下js封装写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  7. </head>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. list-style: none;
  13. font-family: Tahoma,Helvetica,sans-serif;
  14. }
  15. a {
  16. text-decoration:none;
  17. }
  18. a:link {
  19. color:#000000;
  20. }
  21. a:hover {
  22. color: #777;!important;
  23. }
  24. .bgdrag {
  25. display: none;
  26. position: absolute;
  27. z-index: 9;
  28. left: 0;
  29. top: 0;
  30. background-color: #000;
  31. opacity: 0.3;
  32. }
  33. .popup_win_drag {
  34. z-index: 11;
  35. }
  36. .popup_win {
  37. font-size: 13px;
  38. background: #F5F5F5;
  39. z-index: 10;
  40. width: 750px;
  41. height: 430px;
  42. position: absolute;
  43. left: 0;
  44. top: 0;
  45. border-radius:13px;
  46. display: none;
  47. }
  48. .popup_title {
  49. background: #eee !important;
  50. border-radius:13px 13px 0 0;
  51. float: left;
  52. width: 100%;
  53. height: 5%;
  54. line-height: 40px;
  55. }
  56. .popup_win_button{
  57. font-size: 25px;
  58. text-align: center;
  59. line-height: 40px;
  60. position: absolute;
  61. left: 690px;
  62. top: 0px;
  63. }
  64. .popup_win_title {
  65. float: left;
  66. font-size: 20px;
  67. font-weight:bold;
  68. padding: 0px 10px;
  69. }
  70. .popup_win_left {
  71. border:0.5px solid #aaaaaa;
  72. }
  73. .popup_win_left {
  74. float: left;
  75. width: 44.5%;
  76. height: 100%;
  77. border-radius: 0 0 0 13px;
  78. }
  79. .popup_win_right {
  80. float: right;
  81. width: 55%;
  82. height: 100%;
  83. }
  84. .popup_win_public {
  85. }
  86. .popup_win_pro_list {
  87. width: 261px;
  88. }
  89. .popup_win_line {
  90. padding: 5px 45px;
  91. }
  92. .popup_lin {
  93. position: relative;
  94. }
  95. .alert-min{
  96. transition: all 0.1s;
  97. height: 40px !important;
  98. width: 200px !important;
  99. }
  100. .popup_win_large{
  101. display: none;
  102. }
  103. </style>
  104. <body>
  105. <div class="show">打开弹窗</div>
  106. <!--幕布开始-->
  107. <div class="bgdrag"></div>
  108. <!--幕布结束-->
  109. <div class="popup_win">
  110. <!-- 头部 -->
  111. <div class="popup_win_drag">
  112. <div class="popup_title">
  113. <div class="popup_win_title">弹窗</div>
  114. </div>
  115. </div>
  116. <span class="popup_win_button">
  117. <a class="popup_win_small" href="javascript:;">-</a>
  118. <a class="popup_win_large" href="javascript:;"></a>
  119. <a class="popup_win_close" href="javascript:;">×</a>
  120. </span>
  121. <!-- 头部 -->
  122. <div class="popup_win_order">
  123. <div class="popup_win_left">
  124. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  125. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  126. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  127. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  128. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  129. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  130. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  131. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  132. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  133. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  134. </div>
  135. <div class="popup_win_right">
  136. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  137. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  138. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  139. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  140. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  141. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  142. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  143. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  144. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  145. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  146. JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗JS弹窗
  147. </div>
  148. </div>
  149. </div>
  150. <script type="text/javascript">
  151. $(function () {
  152. var data = ({
  153. win :'popup_win',
  154. mask :'bgdrag',
  155. win_drag :'popup_win_drag',
  156. win_body :'popup_win_large'
  157. });
  158. //初始化 弹窗类
  159. var arrhs = new PopupWindow();
  160. arrhs.variableInit(data);
  161. //打开弹窗
  162. $('.show').click(function () {
  163. arrhs.open();
  164. });
  165. //关闭弹窗
  166. $('.popup_win_close').click(function () {
  167. arrhs.close();
  168. });
  169. //最小化
  170. $('.popup_win_small').click(function(){
  171. arrhs.small();
  172. $('.popup_win_button').css({"left":"144px"});
  173. $('.popup_win_large').show();
  174. $('.popup_win_small').hide();
  175. $('.popup_win_order').hide();
  176. });
  177. //最大化
  178. $('.popup_win_large').click(function(){
  179. $('.popup_win_button').css({"left":"690px"});
  180. $('.popup_win_large').hide();
  181. $('.popup_win_small').show();
  182. $('.popup_win_order').show();
  183. arrhs.large();
  184. });
  185. //弹窗类
  186. function PopupWindow() {
  187. //公共变量
  188. this.win = '';
  189. this.mask = '';
  190. this.win_drag = '';
  191. this.win_body = '';
  192. this.window = '';
  193. this.move = false;
  194. this.offsetX = 0;
  195. this.offsetY = 0;
  196. //初始化
  197. PopupWindow.prototype.variableInit = function (data) {
  198. this.win = $('.'+data.win); //弹窗布局string
  199. this.mask = $('.'+data.mask); //遮罩部分
  200. this.win_drag = $('.'+data.win_drag); //拖拽部分
  201. this.win_body = $('.'+data.win_body); //主体部分
  202. this.wind = $(window);
  203. this.carryOut(); //点击拖拽效果
  204. }
  205. PopupWindow.prototype.init = function () {
  206. this.mask.css({'width': this.wind.width(), 'height': this.wind.height()});//幕布
  207. this.win.css({
  208. 'left': (this.wind.width() - this.win.width()) / 2,
  209. 'top' : (this.wind.height() - this.win.height()) / 2
  210. });//居中
  211. }
  212. PopupWindow.prototype.carryOut = function () {
  213. var This = this;
  214. This.init();
  215. console.log(This.win_drag.width());
  216. This.win_drag.mousedown(function (ev) {
  217. var e = ev || window.event;
  218. e.stopPropagation();
  219. This.move = true;
  220. This.offsetX = e.offsetX;
  221. This.offsetY = e.offsetY;
  222. });
  223. this.win_drag.mouseup(function () {
  224. This.move = false;
  225. });//鼠标松开点击
  226. $(document).mousemove(function (ev) {
  227. if (!This.move) return;//(判断鼠标是否点击下去)
  228. var e = ev || window.event;
  229. var x = e.clientX - This.offsetX;
  230. var y = e.clientY - This.offsetY;
  231. var pageW = This.wind.width();
  232. var pageH = This.wind.height();
  233. var dialogW = This.win.width();
  234. var dialogH = This.win.height();
  235. var maxX = pageW - dialogW; //X轴可拖动最大值
  236. var maxY = pageH - dialogH; //Y轴可拖动最大值
  237. x = Math.min(Math.max(0, x), maxX); //X轴可拖动范围
  238. y = Math.min(Math.max(0, y), maxY); //Y轴可拖动范围
  239. //居中
  240. This.win.css({'left': x, 'top': y});
  241. });
  242. }
  243. PopupWindow.prototype.open = function () {
  244. this.init();
  245. this.win.fadeIn("slow");
  246. this.mask.show();
  247. this.win_body.show();
  248. }
  249. PopupWindow.prototype.close = function () {
  250. this.win.hide();
  251. this.mask.hide();
  252. }
  253. PopupWindow.prototype.small = function () {
  254. this.win.addClass('alert-min');
  255. this.win.css({'top':'90%','left':'0'});
  256. this.win_body.hide();
  257. }
  258. PopupWindow.prototype.large = function() {
  259. this.win.removeClass('alert-min');
  260. this.win_body.show();
  261. this.open();
  262. }
  263. }
  264. })
  265. </script>
  266. </body>
  267. </html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

感谢你的支持,我会继续努力!
扫码打赏,建议金额1-10元