Javascript实应用之弹出层效果(一)基本的弹出层

一、先看一下效果:

未弹出的效果:

弹出框效果

二、源代码:

html文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>弹出层效果</title>
  6. <style type="text/css">
  7. *{margin:0;padding:0;}
  8. ul{list-style:none;}
  9. .waper {
  10. margin: 0 auto;
  11. width: 1200px;
  12. }
  13. #header {
  14. background: none repeat scroll 0 0 #2a2c2e;
  15. font-family: "微软雅黑";
  16. height: 60px;
  17. width:100%;
  18. position:fixed;
  19. z-index:502;
  20. }
  21. .loginbar{float:right;line-height:60px;}
  22. .loginbar a{display:block;float:left;padding:0 20px;}
  23. #header a, #footer a{text-decoration:none;color:#fff;}
  24. .fixed{height:60px;clear:both;}
  25. #main ul{margin:0;padding:0;clear:both;}
  26. #main ul li{float:left;margin:15px 45px;width:300px;height:170px;border:1px solid #ccc;}
  27. </style>
  28. <link type="text/css" rel="stylesheet" href="pop.css"/>
  29. </head>
  30. <body>
  31. <header id="header">
  32. <div class="waper">
  33. <div class="loginbar">
  34. <a href="javascript:;" id="loginBtn">登录</a>
  35. <a href="javascript:;" id="regBtn">注册</a>
  36. </div>
  37. </div>
  38. </header>
  39. <section class="main clearfix" id="main">
  40. <div class="fixed"></div>
  41. <div class="waper">
  42. <ul>
  43. <li></li>
  44. <li></li>
  45. <li></li>
  46. <li></li>
  47. <li></li>
  48. <li></li>
  49. <li></li>
  50. <li></li>
  51. <li></li>
  52. <li></li>
  53. <li></li>
  54. <li></li>
  55. <li></li>
  56. </ul>
  57. <div class="clearfix"></div>
  58. </div>
  59. <div class="clearfix"></div>
  60. </section>
  61. <footer id="footer">
  62. </footer>
  63. <script src="popup.js"></script>
  64. <script>
  65. var loginBtn = document.getElementById("loginBtn");
  66. loginBtn.onclick = function(){
  67. new Popup();
  68. }
  69. </script>
  70. </body>
  71. </html>

css文件

  1. @charset "utf-8";
  2. /* CSS Document */
  3. *{margin:0;padding:0}
  4. .popupbox{ position:fixed;z-index:9998;}
  5. .popup{background:#fcfdfd;relative;height:100%;width:100%;position:absolute;background:#fff;z-index:10000;}
  6. .popupborder{background:#000;opacity:0.6;filter:Alpha(opacity=60);position:absolute;border-radius:5px;top:-6px;left:-6px;z-index:9999;}
  7. .popuptop{height:40px; line-height:40px; background:url(images/tcbg.gif) repeat-x; cursor:pointer;}
  8. .popuptop span{font-size:14px; font-weight:bold; color:#fff;float:left; text-indent:20px;}
  9. .popuptop a.popclose{display:block; background:url(images/close.png) no-repeat; width:22px; height:22px;float:right;margin-right:7px; margin-top:10px; cursor:pointer;}
  10. .popuptop a.popclose:hover{background:url(images/close1.png) no-repeat;}
  11. .popupinfo{padding-top:30px;height:95px;}
  12. .popupbottom{ background-color: #f6f6f6;
  13. border-top: 1px solid #dadee5;text-align:center;padding:10px 0;width:100%;position:absolute;bottom:0px;z-index:10000;}
  14. .btn,.bluebtn{ background:#e6e6e6;
  15. border: 1px solid #c4c4c4;
  16. border-radius: 2px;
  17. color: #333;
  18. cursor: pointer;
  19. display: inline-block;
  20. font-family: inherit;
  21. font-size: 100%;
  22. line-height: normal;
  23. margin: 0;
  24. overflow: visible;
  25. padding: 4px 10px;
  26. text-align: center;
  27. text-decoration: none;
  28. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  29. vertical-align: middle;
  30. white-space: nowrap;}
  31. .bluebtn{
  32. background-color: #1b75b6;
  33. background-position: 0 -120px;
  34. border-color: #106bab #106bab #0d68a9;
  35. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  36. color:#fff;
  37. }
  38. .btn:hover,.bluebtn:hover{opacity:0.7;filter:Alpha(opacity=70);}
  39. .mask{background:#000;opacity:0.5;filter:Alpha(opacity=50);position:absolute;z-index:9000;width:100%;height:100%;top:0;left:0;}

js文件

  1. /*弹出层
  2. * @author shixinke (http://www.shixinke.com)
  3. */
  4. function Popup(options)
  5. {
  6. this.options = options;
  7. this.init();
  8. }
  9. Popup.prototype = {
  10. defaults:{//默认设置
  11. title:'信息', //弹层标题
  12. closeable:true,
  13. width:300,
  14. height:400,
  15. content:'您好',
  16. showBtn:false,
  17. },
  18. init:function(){//初始化
  19. this.self = this;
  20. this.options = this.extends(this.options, this.defaults);
  21. this.create();
  22. },
  23. create:function(){//创建弹层html
  24. var popObj = document.createElement("div");
  25. var wrapperWidth = this.options.width+12;
  26. var wrapperHeight = this.options.height+12;
  27. var btnHtml = '';
  28. if(this.options.showBtn)
  29. {
  30. btnHtml = '<div class="popupbottom">'+
  31. '<input name="submit" type="button" class="bluebtn" value="确定" id="popupsubmit"/>&nbsp;'+
  32. '<input name="cancel" type="button" class="btn" value="取消" id="popupcancel"/>'+
  33. '</div>';
  34. }
  35. var html = '<div class="popup" style="width:'+this.options.width+'px;height:'+this.options.height+'px">'+
  36. '<div class="popuptop"><span>'+this.options.title+'</span><a class="popclose" id="popclose"></a></div>'+
  37. '<div class="popupinfo">'+
  38. this.options.content+
  39. '</div>'+
  40. btnHtml+
  41. '</div>'+
  42. '<div class="popupborder" style="width:'+wrapperWidth+'px;height:'+wrapperHeight+'px"></div>';
  43. popObj.className = 'popupbox';
  44. popObj.id = 'popupbox';
  45. popObj.style.width = wrapperWidth +'px';
  46. popObj.style.height = wrapperHeight +'px';
  47. popObj.innerHTML = html;
  48. this.addMask();
  49. document.body.appendChild(popObj);
  50. var offset = this.getPosition();
  51. popObj.style.left = offset[0]+"px";
  52. popObj.style.top = offset[1]+"px";
  53. this.events();
  54. },
  55. extends:function(obj1, obj2){//合并自定义属性和默认属性
  56. var opts = obj2;
  57. for(property in obj1)
  58. {
  59. if((obj1[property] != 'undefined') (obj1[property].length > 0))
  60. {
  61. opts[property] = obj1[property];
  62. }
  63. }
  64. return opts;
  65. },
  66. events:function()
  67. {
  68. var closeBtn = document.getElementById("popclose");
  69. closeBtn.onclick = this.close;
  70. },
  71. getPosition:function(){//获取位置
  72. //
  73. var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
  74. var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  75. var offsetWidth = document.getElementById("popupbox").offsetWidth;
  76. var offsetHeight = document.getElementById("popupbox").offsetHeight;
  77. var x = (clientWidth-offsetWidth)/2;
  78. var y = (clientHeight-offsetHeight)/2;
  79. return [x,y];
  80. },
  81. addMask:function()
  82. {
  83. var maskObj = document.createElement("div");
  84. var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
  85. var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  86. maskObj.className = 'mask';
  87. maskObj.id = 'mask';
  88. maskObj.style.width = scrollWidth+"px";
  89. maskObj.style.height = scrollHeight+"px";
  90. document.body.appendChild(maskObj);
  91. },
  92. close:function(){
  93. var maskObj = document.getElementById("mask");
  94. var popObj = document.getElementById("popupbox");
  95. document.body.removeChild(maskObj);
  96. document.body.removeChild(popObj);
  97. },
  98. }