原理：

1. 点击按钮，触发窗口显示，遮罩层显示，并设置窗口的位置

2. 为弹出的窗口绑定鼠标滚动事件和视窗改变事件

3.点击关闭按钮，弹窗消失，遮罩层消失

html 代码：

 <!DOCTYPE html>

 <html lang="en">

 <html>

     <head>

         <meta charset="utf-8" />

         <link rel="stylesheet" href="./css/tanchuang.css" />

         <script src="./js/tanchuang.js"></script>

     </head>

     <body style="height:3000px;">

         <input type="button" id="btn" value="触发按钮" /><br/>

         <div id="login">

             <div class="header">

                 <h3 id="move">用户登录窗口</h3>

                 <a href="javascript:;" class="close" id="close">X</a>

             </div>

             <div class="body">

                 <h3>购物之前必须先登录</h3>

                 <ul>

                     <li><span>用户名:</span><input type="text" name="user" /></li>

                     <li><span>密码:</span><input type="text" name="userPwd" /></li>

                     <li class="act"><input type="submit" value="登录" class="log"/> <input type="submit" value="注册" class="zhuce"/></li>

                 </ul>

             </div>

         </div>

         <div class="mask" id="mask"></div>

     </body>

 </html>

css 代码：

 * {

     margin:;

     padding:;

     list-style-type:none;

     font-family:微软雅黑;

     font-size:14px;

 }

 a {

     text-decoration:none;

     color:#ccc;

 }

 h3 {

     font-size:1.2em;

 }

 #btn{

     position:absolute;

     left:50%;

     top:300px;

 }

 #login {

     width:600px;

     height:400px;

     border:1px solid #ccc;

     background:#fff;

      /* position:fixed;  */

      position:absolute;

     z-index:;

     display:none;

 }

 #login .header {

     height:40px;

     border-bottom:1px solid #ccc;

 }

 #login .header  h3{

     float:left;

     margin:10px 0px 0px 10px;

 }

 #login .header .close {

     float:right;

     margin:10px 10px 0px 0px;

     font-size:1.2em;

 }

 #login .body {

     width:300px;

     margin:80px auto;

 }

 #login .body h3 {

     margin-bottom:20px;

     text-align:center;

 }

 #login .body ul li {

     margin:20px;

 }

 #login .body ul li span {

     display:inline-block;

     width:80px;

     text-align:right;

     padding-right:20px;

 }

 #login .body ul li.act {

     text-align:center;

 }

 .log {

     background:#ff8800;

     color:white;

     border:none;

     padding:5px 10px;

     -moz-border-radius: 5px; /* Firefox */

     -webkit-border-radius: 5px; /* Safari 和 Chrome */

     border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

     cursor:pointer;

     cursor: hand;

 }

 .zhuce {

     background:#337;

     color:white;

     border:none;

     padding:5px 10px;

     -moz-border-radius: 5px; /* Firefox */

     -webkit-border-radius: 5px; /* Safari 和 Chrome */

     border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

     cursor:pointer;

     cursor: hand;

 }

 .mask {

     width:100%;

     height:100%;

     position:fixed;

     left:0px;

     top:0px;

     background:#000;

     opacity:0.3;

     filter:alpha(opacity:30);

     z-index:;

     display:none;

 }

js 代码：

 window.onload = function () {

     // 获取对象属性的兼容 obj.currentStyle[attr] 为ie的方式，getComputedStyle(obj,false)[attr]为谷歌的方式

     function getStyle(obj,attr){

         // if(obj.currentStyle){

         //     return obj.currentStyle[attr];

         // }else{

         //     return getComputedStyle(obj,false)[attr];

         // }

         return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr] ;

     };

     // 参数为两个时，是获取对象的属性值，为三个时，是设置对象的属性值

     function css(obj,attr,value){

         // if(arguments.length == 2){

         //     return getStyle( obj , attr );

         // }else{

         //     obj.style[attr] = value;

         // }

         return arguments.length == 2 ? getStyle( obj , attr ) :  obj.style[attr] = value ;

     };

     // 构造弹窗

     function pop_window(){

         this.Obtn = document.querySelector('#btn');

         this.Oclose = document.querySelector('#close');

         this.Ologin = document.querySelector('#login');

         this.Omask = document.querySelector('#mask');

     };

     // 绑定弹窗事件

     pop_window.prototype.bind = function(){

         var that = this ;

         this.Obtn.onclick = function(){

             css(that.Ologin,'display','block');

             css(that.Omask,'display','block');

             that.setposition();

         };

         this.Oclose.onclick = function(){

               css(that.Ologin,'display','none');

               css(that.Omask,'display','none');

         };

         window.onresize = document.body.onscroll = function(){

               css(that.Ologin,'display','block');

               css(that.Omask,'display','block');

               that.setposition();

         };

     };

     // 设置弹窗的位置：设置left 和 top 值即可决定弹窗的位置

     pop_window.prototype.setposition = function(){

         var OlogWidth = css(this.Ologin,'width');

         var OlogHeight = css(this.Ologin,'height');

         var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

         var wind_Width = document.body.clientWidth||document.documentElement.clientWidth;

         var wind_Height = window.innerHeight;

         css(this.Ologin,'left',(parseInt(wind_Width)-parseInt(OlogWidth))/2 + 'px' );

         css(this.Ologin,'top',( (parseInt(wind_Height)-parseInt(OlogHeight) )/2 + parseInt(scrollTop) ) + 'px'  );

     }

     var opop = new pop_window();

     opop.bind();

 }

运行结果：弹出一个居中对齐的窗口

js 弹窗的实现的更多相关文章

  1. cefsharp重写默认js弹窗（alert/confirm/prompt）

    1.设置js弹窗控制器 webView.JsDialogHandler = this;  //js弹窗控制 this表示本类对象,所以本类要实现IJsDialogHandler接口 2.实现IJsDi ...

  2. js弹窗

    常用人JS弹窗,lhgDialog 4.20

  3. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  4. 一行js弹窗代码就能设计漂亮的弹窗广告

    接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: ...

  5. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  6. (转)js弹窗&返回值(window.open方式)

    本文转载自:http://hi.baidu.com/z57354658/item/5d5e26b8e9f42fa7ebba93d4 js弹窗&返回值(window.open方式) test.h ...

  7. asp.net 后台使用js弹窗失效问题

    1.这些事件输出来前后都变成JS代码了,看到到这样的代码的了.会变成<script>alert('合同号XXX已存在')</script>首先后台调试一下看看Page.Clie ...

  8. JS弹窗带遮蔽的功能

    很不错的JS原生自定义弹窗,很实用! function myAlert(str,click,useCancel){ var overflow=""; var $hidder=nul ...

  9. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

随机推荐

  1. 基础 - #pragma pack (n) 设置对齐方式

    // pragma_pack.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windows.h> #inc ...

  2. MySQL学习----explain查看一条sql 的性能

    在开发的过程中,对于我们写的sql语句,我们有时候会考虑sql语句的性能,那么explain就是首选.Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决 ...

  3. [UE4]透明按钮

    Background Color的透明度设置为0,就能让按钮背景完全透明,但是按钮里面的子控件并不会跟着透明

  4. [UE4]响应鼠标点击

  5. 逻辑运算符&逻辑短路

    (1)and 逻辑与 全真则真,一假则假 print(True and True) #True print(False and True) #False print(False and False) ...

  6. cocos源码分析--SpriteBatchNode绘图原理

    SpriteBatchNode继承Node,并实现了TextureProtocol接口,重写了Node的addChild()方法,visit()方法以及draw()方法. addChild()方法限制 ...

  7. JMeter性能（压力）测试--使用解锁

    1. 首先去官网下载JMeter:  http://jmeter.apache.org/download_jmeter.cgi 2. 解压缩后到目录 \apache-jmeter-5.0\bin 下找 ...

  8. element-ui 带单选框的表格

    效果:不只是带单选框,点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下效果 提供 ...

  9. js_字符转Unicode

    在开发中总会遇到关于Unicode的转码和解码,每次都找工具转/解码很麻烦 ,今天在网上get到一个简单的转/解Unicode的函数. var UnicodeFun = { toUnicode: fu ...

  10. TessorFlow学习 之 手写数字识别的搭建

    手写数字识别的搭建