代码：

<!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. Docker基础（上）

    Docker基础(上) 链接:https://pan.baidu.com/s/1KQjKml2OZAReYwOvpWD9XQ 提取码:6vo8 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...

  2. go语言从例子开始之Example29.关闭通道

    关闭 一个通道意味着不能再向这个通道发送值了.这个特性可以用来给这个通道的接收方传达工作已经完成的信息. Example: package main import "fmt" // ...

  3. Android processDebugManifest 异常

    1.使用 gradlew processDebugManifest --stacktrace 进行排查; 2.异常: processDebugManifest (Thread[Execution wo ...

  4. java基础学习笔记四（异常）

    Java中的异常 Exception 如图可以看出所有的异常跟错误都继承与Throwable类,也就是说所有的异常都是一个对象. 从大体来分异常为两块: 1.error---错误 : 是指程序无法处理 ...

  5. 【Flutter学习】之 Flutter 的生命周期

    一,概述 Flutter 的生命周期分为两个部分: Widget 的生命周期 App 的生命周期 二,Widget 的生命周期 Flutter 里的 Widget 分为 StatelessWidget ...

  6. BZOJ 1006: [HNOI2008]神奇的国度(弦图)

    传送门 解题思路 弦图就是图中任意一个大小\(>=4\)的环至少存在一条两个节点不相邻的边,这样的图称为弦图,弦图有许多优美的性质.一个无向图是弦图当且仅当它有一个完美消除序列,完美消除序列就是 ...

  7. 最短路 Dijkstra模板

    普通dijkstra,复杂度O(n*n) #include<bits/stdc++.h> using namespace std; int n,m,f[105][105],dis[105] ...

  8. PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题

    PHP CURL与file_get_contents函数都可以获取远程服务器上的文件保存到本地,但在性能上面两者完全不在同一个级别,下面我先来介绍PHP CURL或file_get_contents函 ...

  9. [CSP-S模拟测试]:游戏（最短路）

    题目传送门(内部题35) 输入格式 第一行,两个正整数$X,Y$.第二行,三个非负整数$A,B,C$.第三行,一个正整数$N$.接下来$N$行,每行两个非负整数$x_i,y_i$. 输出格式 一行,一 ...

  10. django更换默认数据库sqlite3为pymsql后出现Keyerror:255的解决办法----升级PyMySQL

    一.更换数据库的办法: 1.安装PyMySQL 2.修改project目录同名文件下的settings.py:DATABASES = { 'default': { # 'ENGINE': 'djang ...