小程序怎么才能制作_jQuery完成淡入淡出的模态框

jQuery实现淡入淡出的模态框       这篇文章主要为大家详细介绍了jQuery实现淡入淡出的模态框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

 div 
 div 
 a href="#" rel="external nofollow" × /a 
 h3 个人额度情况 /h3 
 /div 
 div 
 p 自2017年1月1日00:00起,至2017年01月16日 24:00,您的个人额度如下: /p 
 div 
 div 
 div 
 i /i 
 span 本年已用额度 /span 
 /div 
 div 0 /div 
 /div 
 div 
 div 
 i /i 
 span 本年可用额度 /span 
 /div 
 div 20000 /div 
 /div 
 /div 
 a href="#" rel="external nofollow" @快邮口岸 /a 
 提供技术支持
 /h5 
 /div 
 /div 
 --模态框背景-- 
 div /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);

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