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 相关文章推荐
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
党员承诺书格式
2014/05/21 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
毕业实习证明范本
2015/06/16 职场文书
创业计划书之便利店
2019/09/05 职场文书