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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
再谈javascript原型继承
Nov 10 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python实现端口复用实例代码
2014/07/03 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python实现自动解数独小程序
2019/01/21 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python构造IP报文实例
2020/05/05 Python
Python如何读取、写入JSON数据
2020/07/28 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
总裁助理岗位职责
2014/02/17 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书