原理：

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. Volley封装

    Volley.jar下载 在Application初始化 Volley queues=Volley.newRequestQueue(appContext); 并返回RequestQueue 对象 pu ...

  2. Django简介及Django项目的创建详述

    Django简介 Django是一个开源的Web应用框架,由Python写成.但是,百度百科中讲它采用了MVC框架模式,其实这个解释不准确. 确切的讲,Django的模式是:路由控制+MTV模式.所谓 ...

  3. [UE4]统一颜色

    这里说的统一颜色,说的是每个玩家看到另外的一个玩家的颜色都是一致的,而不是同一个队伍相同的颜色. 一.同样的在ShooterPlayerState中添加一个变量Color(队伍颜色),设置为可复制. ...

  4. [UE4]函数分组

    函数分组相当于C#里面的“#region #end region”折叠注释

  5. 阿里云：游戏行业DDoS攻击解决方案

    转自:http://www.gamelook.com.cn/2018/01/319420 根据全球游戏和全球移动互联网行业第三方分析机构Newzoo的数据显示:2017年上半年,中国以275亿美元的游 ...

  6. delphi HTML转义字符编码转换

    网上很多把HTML转换成纯文本格式的方法很多思路都是用正则表达式或者分析html代码替换的方法. 本文是利用IE完成转换,即利用IHTMLDocument2接口. Denon天Denon龙Denon ...

  7. (转)C# 控制蜂鸣器发声

    原文地址:http://blog.csdn.net/tsinfeng/article/details/6201918 在C#中可以通过以下四种方式来实现蜂鸣或者报警,播放声音之类的功能.XP下对蜂鸣有 ...

  8. [CTSC2012]熟悉的文章 （后缀自动机 单调队列）

    /* 首先答案显然是具有单调性的, 所以可以二分进行判断 然后当我们二分过后考虑dp来求最长匹配个数, 发现每个点能够转移的地点 肯定是一段区间, 然后这样就能够得到一个log^2算法 至于每个点的匹 ...

  9. mySQL InnoDB 的性能问题讨论

    https://ncisoft.iteye.com/blog/34676 https://www.douban.com/note/245895324/ MySQL最为人垢病的缺点就是缺乏事务的支持,M ...

  10. qt之菜单栏的创建

    很久之前学习的Qt菜单栏的消息响应,昨天发现忘记了,今天又拿起来了,记一下笔记: 就像平常我们常用的软件一样,每个程序基本都有菜单栏,在菜单栏中有很多功能性的按钮,点击这些按钮会弹出有对应的菜单功能, ...