本文实例为大家总结了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); }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】