代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>js实现弹出层效果</title>

		<style>

			#mask {

				background: black;

				opacity:0.75;

				filter:alpha(opacity=75);

				height:1000px;

				width:100%;

				position:absolute;

				left: 0;

				top:0;

				z-index:1000;

			}

			#div-content {

				width:1500px;

				height:1250px ;

			}

			#login {

				position:fixed ;

				left:30%;

				top:30%;

				z-index:1001;

			}

			.loginCon {

				width:670px;

				height:380px;

				background:url(img/loginBg.png)  no-repeat;

			}

			#close {

				width:30px;

				height: 30px;

				background:url(img/close.png)  no-repeat;

				top:5px;

				right:5px;

				cursor: pointer;

				position: absolute;

			}

	#header {

    font-family:'微软雅黑';

    background:#2a2c2e;

    height:60px;

    }

    #login-area{

     float:right;

     margin-top:10px;

     position:relative;

    }

    .login-btn {

        font-family:'微软雅黑';

        width:100px;

        height:40px;

        background:#c9394a;

        text-align:center;

        display:block;

        line-height:40px;

        font-size:14px;

        opacity:.9;

        text-decoration:none;

        color:#fff;

        cursor:pointer;

        }

      .login-btn:hover {

         opacity:1;

       }

		</style>

		<script>

			function openNew(){

	//获取页面的高度和宽度

	var sWidth=document.body.scrollWidth;

	var sHeight=document.body.scrollHeight;

	//获取页面的可视区域高度和宽度

	var wHeight=document.documentElement.clientHeight;

	     //得到<div id="mask">《/div>

		var oMask=document.createElement("div");

		oMask.id="mask";

		//赋值

		oMask.style.height=sHeight+"px";

		oMask.style.width=sWidth+"px";

		//将<div id="mask">《/div>加入页面中

		document.body.appendChild(oMask);

	//得到

	/*

	 <div id="login">

	 </div>

	 */

	var oLogin=document.createElement("div");

	oLogin.id="login";

	//得到

	/*

	<div id="login">

       <div class="loginCon" >

			<div id="close">

			</div>

		</div>

	  </div>

	  */

	oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>";

	document.body.appendChild(oLogin);

	//获取登陆框的宽和高

	var dHeight=oLogin.offsetHeight;

	var dWidth=oLogin.offsetWidth;

		//设置登陆框的left和top

		oLogin.style.left=sWidth/2-dWidth/2+"px";

		oLogin.style.top=wHeight/2-dHeight/2+"px";

	//点击关闭按钮

	var oClose=document.getElementById("close");

		//点击登陆框以外的区域也可以关闭登陆框

		oClose.onclick=oMask.onclick=function(){

					document.body.removeChild(oLogin);

					document.body.removeChild(oMask);

					};

					};

	window.onload=function(){

			var oBtn=document.getElementById("btnLogin");

				//点击登录按钮

				oBtn.onclick=function(){

					openNew();

					return false;

					}

		}

		</script>

	</head>

	<body>

	<div id="header">

           <div id="login-area">

              <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>

           </div>

    </div>

	</body>

</html>

　　效果：

图片：

js 实现弹出层效果的更多相关文章

  1. JS实现弹出层效果

    很多时候我们想去某某网站干点什么的时候,就会让我们先注册登录后才可以访问内容,而现在很多网站注册登录的时候都会有一种遮罩层的效果,就是背景是带有透明度的黑色遮罩,盖满整个网站,然后登录框弹出固定在屏幕 ...

  2. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  3. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  4. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  5. js插件---弹出层sweetalert2（总结）

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  6. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  7. 使用JavaScript实现弹出层效果

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...

  8. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  9. 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox）

    下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下:   像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...

随机推荐

  1. NFS 共享存储实战

    目录 NFS 共享存储实战 一.NFS概述 二.NFS部署 部署NFS客户端backup和web01 统一web.nfs.backup的用户权限 代码部署步骤 三.NFS配置详解 NFS存储小结 四. ...

  2. dictionary小项目代码管理

    软件项目开发流程 需求分析 ----> 概要设计  ---> 项目计划 ---->详细设计--->编码测试 -----> 项目测试 ---->调试修改 ---> ...

  3. java环境--JDK和Tomcat在linux上的安装和配置

    Tomcat在Linux上的安装与配置 以下使用的Linux版本为: Redhat Enterprise Linux 7.0 x86_64,Tomcat版本为tomcat-7.0.54.1.下载JDK ...

  4. GOOSE报文解析

    GOOSE报文解析 变电站 使用 MMS报文 http://www.360doc.com/content/16/1014/20/36538220_598459873.shtml

  5. Django Rest框架 APIView源码调用

    上一篇说了请求访问的流程,这一篇说一下请求对应的源码调用 as_view 定义view dispatch dispatch initialize_request get_parsers         ...

  6. 在迭代一个集合的时候，如何避免ConcurrentModificationException？

    在遍历一个集合的时候,我们可以使用并发集合类来避免ConcurrentModificationException,比如使用CopyOnWriteArrayList,而不是ArrayList.

  7. postgresql中rank() over, dense_rank(), row_number() 的用法和区别

  8. java模式-----单例模式

    什么是单例设计模式? 单例模式,是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中,应用该模式的类一个类只有一个实例.即一个类只有一个对象实例. 类结构 ...

  9. <自动化测试>之<SeleniumIDE使用详解 >

    最近在做些简单的自动化理解培训,以繁化简,就写了一节selenium ide的使用教程,在这里分享给刚入门的朋友 自动化插件工具介绍: 这是一款基于Firefox的自动化录制插件,UI界面化操作,无需 ...

  10. CF gym 101933 K. King's Colors(二项式反演)

    传送门 解题思路 首先给出的树形态没用,因为除根结点外每个点只有一个父亲,它只需要保证和父亲颜色不同即可.设\(f(k)\)表示至多染了\(k\)种颜色的方案,那么\(f(k)=(k-1)^{(n-1 ...