代码：

<!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. Oracle单表备份三种方案

    备份方案一: 1. 备份 create table [备份名] as select * from [表名]; 2. 恢复 truncate table org_group; insert into o ...

  2. 关于Linux_系统资源监控_dmesg_free_uptime_uname

    (系统资源查看命令-dmesg[查看系统内核资源信息])->判断服务器的硬件状态 Comment:dmesg | grep CPU,指定查看cpu资源信息 (系统资源查看命令-free[查看内存 ...

  3. mangodb数据库

    阅读目录 一 简介 二 MongoDB基础知识 三 安装 四 基本数据类型 五 CRUD操作 六 可视化工具 七 pymongo 一 简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1. ...

  4. html生成pdf

    /** * 生成pdf * @param string $html 需要生成的内容 */ function pdf($html='<h1 style="color:red"& ...

  5. java sigar 系统监控

    <dependency> <groupId>org</groupId> <artifactId>sigar</artifactId> < ...

  6. PHP生成PDF完美支持中文,解决TCPDF乱码

    PHP生成PDF完美支持中文,解决TCPDF乱码 2011-09-26 09:04 418人阅读 评论(0) 收藏 举报 phpfontsheaderttfxhtml文档 PHP生成PDF完美支持中文 ...

  7. C++之前置自增与后置自增

    关于前置自增与后置自增的区别我是参考这里:http://bbs.bccn.net/thread-454977-1-1.html 简单复述下,比如++x; 与 x++; 在C中,++x这个表达式的值为原 ...

  8. HDU4578-Transformation-线段树的加、乘、变、次方操作

    Sample Input 5 5 3 3 5 7 1 2 4 4 4 1 5 2 2 2 5 8 4 3 5 3 0 0 Sample Output 307 7489 题意:给出n,m,表示该数有n个 ...

  9. JVM系列文章合集

    博客作者:纯洁的微笑 JVM系列(①):java类的加载机制 JVM系列(②):JVM内存结构 JVM系列(③):GC算法 垃圾收集器 JVM系列(④):jvm调优-命令大全(jps jstat jm ...

  10. apiDoc部署搭建

    apiDoc介绍: 目前,越来越多的项目进行前后端分离,那么就有需要比较规范的来管理API文档.而apiDoc这个API文档管理器,可以根据你项目代码的注释来进行自动生成API文档.同时支持C#.Ja ...