代码：

<!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. 浅谈Java反射与框架

    Java反射 1.示例 1.用户类 package com.lf.entity; import com.lf.annotation.SetProperty; import com.lf.annotat ...

  2. python 数组元素个数

    list=[1,2,3,{1,4,5,6,7}] print(len(list)) 输出4

  3. Fiji-imageJ 无法打开

    可能的原因是文件的路径包含中文名称.

  4. .net从服务端下载文件（可以断点续传）

    public void DownFile(string guid) { var fileTransfer = new FileTransfer(); var directoryPath = Path. ...

  5. Vue - 前端本地项目开发过程中webpack打包内存泄漏问题解决方法

    编译项目出现如下错误: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 原因: n ...

  6. LR快捷键

    record optioning:录制选项——ctrl+f7 runtime setting  : 运行时设置——F4 运行脚本——F5 参数列表:ctrl+L 注释:ctrl+shift+c 选中后 ...

  7. angularjs &登录跳转

    如果要使用$location,$stateParams,那么必须有相应形参controller: function ($rootScope, $http, $scope, $state,$locati ...

  8. 通过create-react-app从零搭建react环境

    一. 快速开始: 全局安装脚手架: $ npm install -g create-react-app 通过脚手架搭建项目: $ create-react-app <项目名称> 开始项目: ...

  9. 聊一聊 http2.0

    1. 我们认识http 协议,从最初的,客户端与服务器进行通讯,基于连接发生的请求与响应 在HTTP1.0时代,连接无法复用,每次下完单,都被强制登出/关机,下一次下单,就得重新登录. 为了解决htt ...

  10. strcpy函数学习

    strcpy的功能如下: 原型声明:char *strcpy(char* dest, const char *src); 头文件:#include <string.h> 和 #includ ...