jQuery实现淡入淡出的模态框

前端之家收集整理的这篇文章主要介绍了jQuery实现淡入淡出的模态框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家总结了jQuery淡入淡出模态框的使用方法,供大家参考,具体内容如下

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

个人额度情况

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

@快邮口岸 提供技术支持
<--模态框背景-->

CSS代码如下:

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相关文章