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 相关文章推荐
一个js过滤空格的小函数
Oct 10 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
如何使用原生Js实现随机点名详解
Jan 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的PSR规范中文版
2013/09/28 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
js实现网页随机验证码
2020/10/19 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python批量生成条形码的示例
2020/10/10 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
大学生职业生涯规划方案
2014/01/03 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Python 正则模块详情
2021/11/02 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript