完整代码

 <!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. HDOJ 1323 Perfection（简单题）

    Problem Description From the article Number Theory in the 1994 Microsoft Encarta: "If a, b, c a ...

  2. HDOJ 1058 Humble Numbers(打表过)

    Problem Description A number whose only prime factors are 2,3,5 or 7 is called a humble number. The ...

  3. Linux之V4L2视频采集编程详解

     V4L2(Video For Linux Two) 是内核提供给应用程序访问音.视频驱动的统一接口. Linux系统中,视频设备被当作一个设备文件来看待,设备文件存放在 /dev目录下,完整路径的设 ...

  4. java类的加载顺序

    related URL: http://www.cnblogs.com/guoyuqiangf8/archive/2012/10/31/2748909.html Parent Class: packa ...

  5. JAVA的四种引用,强弱软虚用到的场景

    1.强引用 最常用的引用类型,如Object object = new Object(),只要强引用存在,GC必定 不回收,即使当前内存空间不足,jAVA虚拟机宁愿抛出OutofMemoryError ...

  6. StackPanel 弹出菜单 ContextMenu

    <StackPanel x:Name="stackpanel_zonghe" Margin="0,10,0,0" Background="Tra ...

  7. javascript算法挑战

    1.翻转字符串算法挑战: 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串. 你的结果必须得是一个字符串 function reverseString(str) ...

  8. (转)Apple Push Notification Services in iOS 6 Tutorial: Part 1/2

    转自:http://www.raywenderlich.com/32960/apple-push-notification-services-in-ios-6-tutorial-part-1 Upda ...

  9. Graph Databases—The NOSQL Phenomenon阅读笔记

    本章内容着重对了NOSQL和RDBMS(关系型数据库管理系统)的不同,以及其各自背后设计时考虑的因素.然后接下来,着重讲述了NOSQL的4种分类方法.下面我们将对重要知识点进行汇总. 1.We def ...

  10. DB2 错误编码 查询（一）（转）

    size=medium][/size]本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码 类代码含义 要获得 ...