jQuery Realizes Fade in and Fade out Modal Box

In this paper, we summarize the use of jQuery fade-in and fade-out modal box for your reference, the specific contents are as follows

The HTML code is as follows: The fixed format is omitted

<div class="theme-popover">
 <div class="theme-poptit">
  <a href="#" rel="external nofollow" class="close"> × </a>
  <h3> Personal quota </h3>
 </div>
 <div class="theme-edu">
  <p> Since 2017 Year 1 Month 1 Day 00:00 From, to 2017 Year 01 Month 16 Day  24:00 Your personal quota is as follows: </p>
  <div class="theme-eduBox">
  <div class="theme-eduInfo lf">
   <div class="theme-eduTopLf">
   <i></i>
   <span class="yye"> Quota used this year </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"> Available quota this year </span>
   </div>
   <div class="theme-eduBomLf bt">20000</div>
  </div>
  </div>
  <h5>
  <a href="#" rel="external nofollow" >@ Express mail port </a>
    Provide technical support 
  </h5>
 </div>
</div>
<-- Modal box background -->
<div class="theme-popover-mask"></div>

The CSS code is as follows:

/* Modal frame */
.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;
}
/* Modal box content */
.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;

The JavaScript code is as follows:

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