jQuery实现淡入淡出的模态框

  ×

个人额度情况

自2017年1月1日00:00起，至2017年01月16日 24:00，您的个人额度如下：

   本年已用额度

   0

   本年可用额度

   20000

  @快邮口岸

   提供技术支持

  

<--模态框背景-->

/*模态框*/

.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:-180px00-330px;

 border-radius:5px;

 border:solid2px#666;

 background-color:#fff;

 display:none;

 box-shadow:0010px#666;

}

.theme-poptit {

 border-bottom:1pxsolid#ddd;

 padding:12px;

 position:relative;

 font-size:14px;

}

.theme-poptit .close {

 float:right;

 color:#999;

 padding:5px;

 margin:-2px-5px-5px;

 font:bold14px/14pxsimsun;

 text-shadow:01px0#ddd

}

.theme-poptit .close:hover {

 color:#444;

}

/*模态框内容*/

.theme-eduBox{

 width:550px;

 height:100px;

 border:1pxsolid#000;

 overflow:hidden;

 margin:10pxauto50px;

 text-align:center;

 padding:5px05px0;

 color:#000;

 background:#fff;

}

.theme-edu p{

 font-size:16px;

 padding:30px020px52px;

 color:#333;

}

.theme-edu h5{

 font-weight:normal;

 text-align:center;

}

.theme-edu h5a{

 color:#f18200;

}

.theme-eduInfo{

 width:49%;

 height:100%;

 font-size:18px;

 float:left;

 font-weight:bold;

 border-right:1pxsolid#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-repeatcentercenter/cover;

}

.theme-eduTopLf i.able{

 background:url("../img/able.png")no-repeatcentercenter/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;

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);

 });

});