原理：

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. tpadmin的坑收集 nginx下配置tp5失败

    如下: 1.ADMIN模块如要关联查询,model的函数名一定不要有“_”下划线,否则找不到 /common/model/**.php 如果把函数名file写成“**_file”,调用时,$vo.** ...

  2. Could not determine own NN ID in namespace 'mycluster'

    执行hdfs namenode -bootstrapStandby的时候报错如下 19/03/24 18:00:48 ERROR namenode.NameNode: Failed to start ...

  3. Linux常用命令1-50（持续更新中）

    1:echo $PATH  (打印出PATH变量的值) 不同用户下面的PATH值有可能不一样 echo   有显示打印的意思 $         表示后面的是一个变量的意思 PATH  变量 /usr ...

  4. 在html中用js代替${pagecontext.request.getcontextpath}这样就不用使用jsp了

    var pathArray = window.location.pathname.split('/');  var secondLevelLocation = pathArray[1];  var l ...

  5. matplotlib基础知识全面解析

    图像基本知识: 通常情况下,我们可以将一副Matplotlib图像分成三层结构: 1.第一层是底层的容器层,主要包括Canvas.Figure.Axes: 2.第二层是辅助显示层,主要包括Axis.S ...

  6. 浏览器兼容java小程序配置说明

    最近在使用的一个web应用系统是内嵌了java小程序,遇到了各种浏览器兼容性问题,现梳理如下: 1.通过以下链接检测当前电脑是否已经安装有java https://java.com/zh_CN/dow ...

  7. Delphi 常用语句

    1.屏蔽Float浮点数出错: Set8087CW(Longword($133f)); 2.Idhttp参数设置: FIdhttp                  := TIdHTTP.Create ...

  8. Servlet --简单用户留言系统

    1.创建用户表和留言表 2.编写数据库连接工具类 public class SqlserverDBConn { private Statement stmt; private Connection c ...

  9. JVM总结-java基本类型

    为什么要引进基本类型? Java 引进了八个基本类型,来支持数值计算.Java 这么做的原因主要是工程上的考虑,因为使用基本类型能够在执行效率以及内存使用两方面提升软件性能. Java 虚拟机的 bo ...

  10. 【IP代理】国内省市域名代理

    最近遇到一个测试问题,就是投放时需要按地域投放,所以需要对指定的IP地址范围内的地方投放才有效. 所以,就调查了下IP代理的方式,一个是SSR,这个好像只能代理国外的域名方式,另外一个就是百度搜索IP ...