完整代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0px;

                 padding: 0px;

             }

             #mask{

                 background-color: black;

                 opacity: 0.3;

                 position: absolute;

                 top: 0px;

                 left: 0px;

                 z-index: 10;

             }

             #kuang{

                 width: 400px;

                 height: 300px;

                 background-color: blueviolet;

                 position: absolute;

                 z-index: 888;

                 left: 200px;

                 top: 250px;

             }

             #close{

                 width: 50px;

                 height: 50px;

                 background-color: red;

                 position: absolute;

                 top: 5px;

                 right: 5px;

                 z-index: 999;

             }

             #close:hover{

                 cursor: pointer;

             }

         </style>

     </head>

     <body>

         <input  type="button" value="登陆"  onclick="show( )"/>

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

         <br />111

     </body>

 </html>

 <script type="text/javascript">

     function  show( ){

 //        获取整个页面的宽和高

           var page_width =document.documentElement.scrollWidth;

         var page_height =document.documentElement.scrollHeight;

 //        获取浏览器的宽和高

         var b_width =document.documentElement.clientWidth;

         var b_height = document.documentElement.clientHeight;

 //        创建一个叫mask的div,id是#mask;

         var mask =document.createElement("div");

         mask.id ="mask";

 //        mask的宽和高

         mask.style.width =page_width +"px";

         mask.style.height = page_height +"px";

 //        在body里添加一个mask的子元素;

         document.body.appendChild(mask);

 //        创建一个叫kuang的div,id是#kuang;

         var kuang = document.createElement("div");

         kuang.id ="kuang";

 //        kuang 在浏览器水平和垂直居中

         kuang.style.left = (b_width - 400) / 2  +"px";

         kuang.style.top =( b_height -300) /2 +"px";

 //        在kuang里放一个div,id=close

         kuang.innerHTML ='<div id ="close"></div>';

 //        在body里添加一个kuang的子元素;

         var ku =document.body.appendChild(kuang);

         alert(ku);

         ku.innerHTML+=222222222222222222;

 //        close做一个点击事件,关闭mask 和 kuang

         document.getElementById("close").onclick =function( ){

             document.body.removeChild(mask);

             document.body.removeChild(kuang);

         }

 //    mask做一个点击事件,关闭mask 和 kuang

         document.getElementById("mask").onclick =function( ){

             document.body.removeChild(mask);

             document.body.removeChild(kuang);

         }

     }

 </script>

预览图：

原生js制作弹出框的更多相关文章

  1. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  2. js 常见弹出框学习

    模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...

  3. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  4. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  5. jsp + js + 前端弹出框

    在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...

  6. js swal()弹出框

    做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...

  7. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

  8. js实现弹出框跟随鼠标移动

    又是新的一天网上冲浪,在bing的搜索页面下看到这样一个效果: 即弹出框随着鼠标的移动而移动.思路大概为: 调用onmousemove函数,将鼠标的当前位置赋予弹出框即可 //html <div ...

  9. jsp页面制作弹出框

    各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript> <!-- window.open ('page.html') ...

随机推荐

  1. Spring MVC 如何防止XSS、SQL注入攻击

    在Web项目中,通常需要处理XSS,SQL注入攻击,解决这个问题有两个思路: 在数据进入数据库之前对非法字符进行转义,在更新和显示的时候将非法字符还原 在显示的时候对非法字符进行转义 如果项目还处在起 ...

  2. Templates 模板:

    Templates 模板: ########################温金 $template wj-flow01,"/data01/applog_backup/winfae_log/ ...

  3. unix网络编程之简介

    通常客户一次只与一个服务器通信, 上图为:一个服务器同时处理多个客户的请求. 上图为:客户与服务器使用TCP协议在同一个以太网中通信. 路由器是广域网的架构设备.今天,最大的广域网是因特网. 上图为: ...

  4. Storm概念介绍

    Storm核心概念如下:  1.Tuple:元组                Tuple即元组,是一个拓扑Topology中的Spout和Bolt组件之间数据传递的基本单元.元组中的字段可以是任何类 ...

  5. [Qt] QString 和 char* 转换

    (1) QString 转 char* char acResult[10240]; //QByteArray baResult = strResult.toLatin1(); QByteArray b ...

  6. PHP中字符串类型与数值类型混合计算

    字符串转数值的规则 当一个字符串被当作一个数值来取值,其结果和类型如下: 如果该字符串没有包含 '.','e' 或 'E' 并且其数字值在整型的范围之内(由 PHP_INT_MAX 所定义),该字符串 ...

  7. solr全文检索基本原理

    场景:小时候我们都使用过新华字典,妈妈叫你翻开第38页,找到“坑爹”所在的位置,此时你会怎么查呢?毫无疑问,你的眼睛会从38页的第一个字开始从头至尾地扫描,直到找到“坑爹”二字为止.这种搜索方法叫做顺 ...

  8. 经常使用ARM汇编指令

    一面学习,一面总结,一面记录. 以下是整理在网上找到的一些资料,简单整理记录一下,方便以后查阅. ARM处理器的指令集能够分为跳转指令.数据处理指令.程序状态寄存器(PSR)处理指令.载入/存储指令. ...

  9. Quartz中时间表达式的设置-----corn表达式

    Quartz中时间表达式的设置-----corn表达式 时间格式: <!-- s m h d m w(?) y(?) -->,   分别相应: 秒>分>小时>日>月 ...

  10. Java基础知识强化62：Arrays工具类之概述和使用

    1. Arrays工具类: Arrays这个类包含操作数组(比如排序和查找)的各种方法. 2. Arrays的方法: (1)toString方法:把数组转成字符串 public static Stri ...