天恒娱乐注册:jQuery实现淡入淡出的模态框

标签:网站展示    日期:2017-12-28 11:03    录入:天恒娱乐平台注册    浏览:

  

[jQuery,模态框]jQuery实现淡入淡出的模态框

  

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

  

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

  
  
  天恒娱乐平台
  
  ×  

个人额度情况

  
  
  

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

  
  
  
    本年已用额度  
  
0
  
  
  
    本年可用额度  
  
20000
  
  
  
  @快邮口岸  提供技术支持  
  
  
  <--模态框背景-->  
  
  
  

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);  });  });  
  
  

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

  

★★★小编:天恒娱乐 整理文章,欢迎大家转载 ★★★