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

发表于   |   分类于 左手代码 js/JQuery   |   阅读(979)   |   评论(0)

一、先看一下效果：

未弹出的效果：

弹出框效果

二、源代码：

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>
  40.         <section class="main clearfix" id="main">
  41.             <div class="fixed"></div>
  42.             <div class="waper">
  43.                 <ul>
  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.                     <li></li>
  58.                 </ul>
  59.                 <div class="clearfix"></div>
  60.             </div>
  61.             <div class="clearfix"></div>
  62.         </section>
  64.         <footer id="footer">
  66.         </footer>
  69.         <script src="popup.js"></script>
  70.         <script>
  71.             var loginBtn = document.getElementById("loginBtn");
  72.             loginBtn.onclick = function(){
  73.                 new Popup();
  74.             }
  75.         </script>
  76.     </body>
  77. </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.     },
  99. }

专题 更多...

分类 更多...

展开

标签 更多...

归档 更多...

展开