这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了 js 实现弹窗暗层效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
话不多说,请看示例代码:
- <!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>
来源: http://www.phperz.com/article/17/0526/328497.html