js实现弹窗暗层效果


Posted in Javascript onJanuary 16, 2017

话不多说,请看示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type='text/css'>
 .fn-mask{width: 100%;height: 100%;background: #000;opacity: 0.5;position: fixed;left: 0;top: 0;transition:all 0.5s ease 0s;z-index: 998;}
  button{margin:0 auto;display: block;margin-top: 300px;background: pink;}
  .main{width: 100px;height: 100px;background: #fff;position: fixed;left: 50%;top: 50%;z-index: 1000;text-align: center;line-height: 100px;}
  .main i{color: red;font-size: 36px;position: absolute;top:-30px;right: 0;cursor: pointer;}
 </style>
</head>
<body>
 <div class="box">
  <button>活动细则</button>
  <div class="fn-mask hide"></div>
  <div class="main hide">
  你好,我是弹窗
  <i>x</i>
  </div>
 </div>
</body>
 <script>
 $(function(){
 $('button').on('click',function(){
 $('.fn-mask').removeClass('hide');
 $('.main').removeClass('hide');
 })
 $('.main i').on('click',function(){
 $('.fn-mask').addClass('hide');
 $('.main').addClass('hide');
 })
})
 </script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
js实现简单的计算器功能
Jan 16 #Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 #Javascript
基于jQuery实现的打字机效果
Jan 16 #Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 #Javascript
JavaScript严格模式详解
Jan 16 #Javascript
关于iframe跨域POST提交的方法示例
Jan 15 #Javascript
JavaScript中利用for循环遍历数组
Jan 15 #Javascript
You might like
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP fclose函数用法总结
2019/02/15 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
js Function类型
2011/12/04 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python骚操作之动态定义函数
2019/03/26 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
详解python polyscope库的安装和例程
2020/11/13 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
小学生成长感言
2014/01/30 职场文书
国培远程培训感言
2014/03/08 职场文书
应急管理培训方案
2014/06/12 职场文书
个人收入证明范本
2014/09/18 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
八年级历史教学反思
2016/02/19 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android