[前端] 弹出层效果

一个后台框架页面或都前端页面可能都需要一个弹出层效果，因为运用的比较多，所以在这里写了一下封装，以备不时之用。

效果：

首先是一个HTML布局文件：

 

<div class="qh-poplayout" id="threeDayWeather">
   <div class="qh-poplayout-main qh-poplayout-bordertop">
      <div class="qh-poplayout-heading">
         <h2>未来3天全国天气预报</h2>
         <i class="close">×</i>
      </div>
      <div class="qh-poplayout-body">
         <div class="qh-weather-msg">
            <p>13～17日，江南、华南及贵州等地将有一次大到暴雨过程，局地有大暴雨，强降雨集中时段为14～16日，最大日降水量可达100～180毫米，最大小时雨强可达50～80毫米。</p>

            <h3>2、弱冷空气影响北方</h3>

            受弱冷空气影响，13至14日，新疆北部和东部、内蒙古大部、甘肃中西部、宁夏北部等地有4～6级风，新疆山口地区风力可达8～9级；新疆东部和南疆盆地、内蒙古西部等地的部分地区有扬沙或浮尘，局地有沙尘暴。

            <h3>二、未来24小时具体预报</h3>

            <p>今天14时至20时，新疆南疆西部山区、内蒙古东北部、东北地区中北部、西藏东南部、川西高原南部、云南西部和南部、贵州大部、重庆南部、江南西部、华南大部、台湾等地有小到中雨，其中，湖南中北部、重庆东南部等地的部分地区有大雨，局地暴雨，上述部分地区并伴有雷暴等强对流天气。</p>

            <ul class="qh-paging qh-paging-center">
               <li class="prev disabled"><a href="javascript:;"><<</a></li>
               <li class="cur"><a href="javascript:;">1</a></li>
               <li><a href="javascript:;">2</a></li>
               <li><a href="javascript:;">3</a></li>
               <li><a href="javascript:;">4</a></li>
               <li><a href="javascript:;">5</a></li>
               <li class="next"><a href="javascript:;">>></a></li>
            </ul>
            
         </div>
      </div>
   </div>
</div>

 

 

 

具体的CSS样式：

 

/* 弹出层样式 start */
.qh-poplayout {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
}
.qh-poplayout-bordertop {
    border-top: 3px solid #4AA8E9;
}
.qh-poplayout-main {
    margin: 0 auto;
    background: #fff;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.qh-poplayout-heading {
    height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #EAEAEA;
    line-height: 42px;
}
.qh-poplayout-heading h2 {
    float: left;
    font-size: 16px;
}
.qh-poplayout-heading .close {
    display: block;
    float: right;
    height: 42px;
    width: 42px;
    margin-right: -15px;
    font-size: 18px;
    color: #ccc;
    font-style: normal;
    cursor: pointer;
    text-align: center;
}
.qh-poplayout-heading .close:active {
    color: #999;
}
.qh-poplayout-body {
    padding: 15px;
    font-size: 14px;
}
.qh-weather-msg  p, .qh-weather-msg h3 {
    margin-bottom: 15px;
}
/* 弹出层样式 end */

 

 

 

剩下的就是JS脚本了

 

jQuery.extend({
   poplayoutFun: function(ele, width, offsetTop, alpha) {

      /*
         参数说明：
            ele        表示弹出层选择器 
            width      弹出层宽度
            offsetTop  距顶高度
            alpha      透明背景 0~1
      */

      // 显示
      $(ele).fadeIn(100);

      // 如果弹出层显示，则赋值高度
      if($(ele).is(':visible')) {
         $(ele).outerHeight($(document).outerHeight());
      }

      // 设置距顶高度
      if(offsetTop) {
         $(ele).find('.qh-poplayout-main').css({'marginTop': offsetTop, 'marginBottom': offsetTop});
      } else {
         $(ele).find('.qh-poplayout-main').css({'marginTop': 150, 'marginBottom': 150});
      }

      // 设置宽度
      $(ele).find('.qh-poplayout-main').outerWidth(width);

      // 设置透明度
      if(alpha) {
         $(ele).css('background-color', 'rgba(0, 0, 0, '+alpha+')');
      } else {
         $(ele).css('background-color', 'rgba(0, 0, 0, 0.5)');
      }

      // close关闭
      $(ele).find('.close').click(function(e) {
         e.stopPropagation();
         $(ele).fadeOut(100);
      });

      // 点击透明区域关闭
      $(ele).click(function() {
         $(this).fadeOut(100);
      });

      // 阻止事件冒泡
      $(ele).find('.qh-poplayout-main').click(function(e) {
         e.stopPropagation();
      });
   }
});

 

 

 

调用方式：

html:

 

<a class="fr threeDayWeather" href="javascript:;">未来3天全国天气预报（05-10更新）</a>

 

js:

 

$('.threeDayWeather').click(function() {
   $.poplayoutFun('#threeDayWeather', 600); 

   if($('.qh-weather-msg').outerHeight() > 600) {
      $('.qh-weather-msg').css({'overfloxX': 'hidden', 'overflowY': 'scroll'});
      $('.qh-weather-msg').outerHeight(600);
   }
});

 

欢迎关注技术开发分享录：http://fenxianglu.cn/