jQuery实现淡入淡出的模态框

本文实例为大家总结了jQuery淡入淡出模态框的使用方法，供大家参考，具体内容如下
HTML代码如下：固定格式就省略了

<div class="theme-popover"> <div class="theme-poptit"><a href="#" rel="external nofollow" 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="#" rel="external nofollow" >@快邮口岸</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）; }）;}）;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。