jQuery实现淡入淡出的模态框
本文实例为大家总结了jQuery淡入淡出模态框的使用方法,供大家参考,具体内容如下
HTML代码如下:固定格式就省略了
<divclass="theme-popover"> <divclass="theme-poptit"> <ahref="#"rel="externalnofollow"class="close">×</a> <h3>个人额度情况</h3> </div> <divclass="theme-edu"> <p>自2017年1月1日00:00起,至2017年01月16日24:00,您的个人额度如下:</p> <divclass="theme-eduBox"> <divclass="theme-eduInfolf"> <divclass="theme-eduTopLf"> <i></i> <spanclass="yye">本年已用额度</span> </div> <divclass="theme-eduBomLfbf">0</div> </div> <divclass="theme-eduInfolfky"> <divclass="theme-eduTopLf"> <iclass="able"></i> <spanclass="kye">本年可用额度</span> </div> <divclass="theme-eduBomLfbt">20000</div> </div> </div> <h5> <ahref="#"rel="externalnofollow">@快邮口岸</a> 提供技术支持 </h5> </div> </div> <--模态框背景--> <divclass="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:-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-edup{ font-size:16px; padding:30px020px52px; color:#333; } .theme-eduh5{ font-weight:normal; text-align:center; } .theme-eduh5a{ 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-eduTopLfi{ position:absolute; top:10px; left:56px; width:20px; height:20px; background:url("../img/used.png")no-repeatcentercenter/cover; } .theme-eduTopLfi.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;
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); }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。