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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
javascript中var的重要性分析
Feb 11 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 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
javascript 清除输入框中的数据
2009/04/13 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
javascript 写类方式之二
2009/07/05 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python编写分类决策树的代码
2017/12/21 Python
django中静态文件配置static的方法
2018/05/20 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
车间调度岗位职责
2013/11/30 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
公司担保书范文
2014/05/21 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
毕业实习感受与体会
2015/05/26 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书