【jQuery】淡入淡出的模态框

演示地址：点我


HTML代码如下：固定格式就省略了

<div class="theme-popover">
   <div class="theme-poptit">
     <a href="#" class="close">×</a>
     <h3>个人额度情况</h3>
   </div>
   <div class="theme-edu">
     <p>自2017年1月1日00:00起，至2017年01月16日 24:00，您的个人额度如下：</p>
     <div class="theme-eduBox">
       <div class="theme-eduInfo lf">
         <div class="theme-eduTopLf">
           <i></i>
           <span class="yye">本年已用额度</span>
         </div>
         <div class="theme-eduBomLf bf">0</div>
       </div>
       <div class="theme-eduInfo lf ky">
          <div class="theme-eduTopLf">
            <i class="able"></i>
            <span class="kye">本年可用额度</span>
          </div>
          <div class="theme-eduBomLf bt">20000</div>
       </div>
     </div>
     <h5>
       <a href="http://www.expecs.com">@快邮口岸</a>
         提供技术支持
     </h5>
   </div>
</div>
<--模态框背景-->
<div class="theme-popover-mask"></div>

CSS代码如下：

/*模态框*/
.theme-popover-mask {
    z-index: 9998;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.7;
    filter:alpha(opacity=70);
    display:none
}
.theme-popover {
    z-index:9999;
    position:fixed;
    top:50%;
    left:50%;
    width:660px;
    height:360px;
    margin:-180px 0 0 -330px;
    border-radius:5px;
    border:solid 2px #666;
    background-color:#fff;
    display:none;
    box-shadow: 0 0 10px #666;
}
.theme-poptit {
    border-bottom:1px solid #ddd;
    padding:12px;
    position: relative;
    font-size: 14px;
}
.theme-poptit .close {
    float:right;
    color:#999;
    padding:5px;
    margin:-2px -5px -5px;
    font:bold 14px/14px simsun;
    text-shadow:0 1px 0 #ddd
}
.theme-poptit .close:hover {
    color:#444;
}
/*模态框内容*/
.theme-eduBox{
    width: 550px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;
    margin: 10px auto 50px;
    text-align: center;
    padding: 5px 0 5px 0;
    color: #000;
    background: #fff;
}
.theme-edu p{
    font-size: 16px;
    padding: 30px 0 20px 52px;
    color: #333;
}
.theme-edu h5{
    font-weight: normal;
    text-align: center;
}
.theme-edu h5 a{
    color: #f18200;
}
.theme-eduInfo{
    width: 49%;
    height: 100%;
    font-size: 18px;
    float: left;
    font-weight: bold;
    border-right: 1px solid #ddd;
}
.theme-edu .ky{
    border-right: 0;
}
.theme-eduTopLf{
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-weight: normal;
}
.theme-eduTopLf i{
    position: absolute;
    top: 10px;
    left: 56px;
    width: 20px;
    height: 20px;
    background: url("../img/used.png") no-repeat center center/cover;
}
.theme-eduTopLf i.able{
    background: url("../img/able.png") no-repeat center center/cover;
}
.theme-eduTopLf .yye,.theme-eduInfo .bf{
    color: #ec4e4e;
}
.theme-eduTopLf .kye,.theme-eduInfo .bt{
    color: #4CB8A8;
}
.theme-eduBomLf{
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    overflow: hidden;
    word-wrap: break-word;

JavaScript代码如下：

jQuery(document).ready(function($) {
  $('.theme-login').click(function(){
    $('.theme-popover-mask').fadeIn(100);
    $('.theme-popover').slideDown(200);
  });
  $('.theme-poptit .close').click(function(){
    $('.theme-popover-mask').fadeOut(100);
    $('.theme-popover').slideUp(200);
  });
});