jQuery实现淡入淡出的模态框


Posted in Javascript onFebruary 09, 2017

本文实例为大家总结了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);
 });
});

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

Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
JS原型与继承操作示例
May 09 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 #Javascript
JS在浏览器中解析Base64编码图像
Feb 09 #Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 #Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 #Javascript
JS回调函数简单用法示例
Feb 09 #Javascript
Bootstrap列表组学习使用
Feb 09 #Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 #Javascript
You might like
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php创建sprite
2014/02/11 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP反射学习入门示例
2019/06/14 PHP
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
Three.js快速入门教程
2016/09/09 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
小程序自定义日历效果
2018/12/29 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
python图像处理之反色实现方法
2015/05/30 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
浅析Python中字符串的intern机制
2020/10/03 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
会议邀请函范文
2014/01/09 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
初中新生军训方案
2014/05/13 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
组织委员竞选稿
2015/11/21 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Javascript设计模式之原型模式详细
2021/10/05 Javascript