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 相关文章推荐
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
面包屑导航详解
Dec 07 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
B2K与车机的中波PK
2021/03/02 无线电
类的另类用法--数据的封装
2006/10/09 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
JavaScript Date对象应用实例分享
2017/10/30 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
分分钟入门python语言
2018/03/20 Python
python实现Flappy Bird源码
2018/12/24 Python
PyQt5实现简易计算器
2020/05/30 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
个人现实表现材料
2014/02/04 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
机关搬迁方案
2014/05/18 职场文书
邀请书模板
2015/02/02 职场文书
Python+Appium新手教程
2021/04/17 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL