原理：

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. FTP的应用

    创建共享文件,并删除 cd /var/ftp/---------------------(切换到ftp目录下) mkdir aaaaa-------------------(创建aaaaa目录) ll ...

  2. [UE4]子控件Child Widget顶层容器选择

    如果父级容器是Canvas,则可以直接设置尺寸.放到其他widget的时候也会保持设定好的尺寸(而不管父容器是什么类型).

  3. 使用.mongorc.js移除哪些比较“危险”的shell辅助函数

    切换到用户目录下 vi .mongorc.js var no = function(){ print("Not on my watch."); }; //禁止删除数据库 db.dr ...

  4. python的json模块介绍

    转载:https://blog.csdn.net/xsj_blog/article/details/51921664 对于数据传递方面,XML是一种选择,还有一种选择是JSON,它是一种轻量级的数据交 ...

  5. Eclipse中Activiti插件的安装

    要想使用Activiti流程引擎,需要在Eclipse安装Activiti插件,才能画流程设计图. 打开Eclipse,点击help -> Install new Software 然后点击 A ...

  6. 使用dtc把dtb的反编译为dts

    sudo apt-get install device-tree-compiler dtc -I dtb -O dts msm8976-v1.1-qrd.dtb > msm8976-v1.1-q ...

  7. pthread mutex

    pthead_mutex_t mutex; 1:create: pthread_mutex_init(pthread_mutex_t* mutex, const pthread_mutexattr_t ...

  8. 基于tcp的下载文件，以及struct模块的应用。

    一 基于TCP的下载 客户端: from socket import * import os def main(): tcp_socket = socket(AF_INET, SOCK_STREAM) ...

  9. Echarts动态加载饼状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  10. IE 主页被恶意篡改的解决方法

    IE 主页被篡改了,在ie 的 主页设置中不起任何作用,这个时候,就要打开注册表来修改: 具体操作如下: 1.运行 regedit  打开注册表 2.找到 HKEY_LOCAL_MACHINE\SOF ...