完整代码

 <!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. PHP vs Java

    http://www.phpddt.com/reprint/php_font-java_end.html http://www.zhihu.com/question/20314377 http://b ...

  2. Entity Framework with MySQL 学习笔记一(复杂类型 Complex Types)

    有时候我们希望在sql一个表里面的column, 一部分被分化成另一个class 典型的例子是 Address 直接看代码: [Table("member")] public cl ...

  3. hdu 3435 A new Graph Game

    http://acm.hdu.edu.cn/showproblem.php?pid=3435 #include <cstdio> #include <iostream> #in ...

  4. 【转】Android UI系列-----时间、日期、Toasts和进度条Dialog

    原文网址:http://www.cnblogs.com/xiaoluo501395377/p/3421727.html 您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注 ...

  5. C#中判断字符串是否中文的方法

    public bool IsChinaString(string CString) { bool BoolValue = false; ; i < CString.Length; i++) { ...

  6. java与数据结构(6)---java实现链栈

    栈之链式存储结构链栈 链栈 栈的链式存储结构成为链栈.链栈是没有头结点,头结点就是栈顶指针top. 代码结构 package list; public interface Stackable;公共接口 ...

  7. WingIDE注册破解方法

    WingIDE是Python程序语言设计的集成开发环境,具有语法标签高亮显示,命令自动完成和函数跳转列表等非常强大的功能.本文主要介绍WingIDE 5安装及注册破解方法. 1. WingIDE 5下 ...

  8. BootStrap——模态框

    模态框(Modal)是BootStrap中很棒的一个插件.可以去BootStrap菜鸟驿站里面看看. 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开 ...

  9. IOS-连接

    http://blog.sina.com.cn/s/articlelist_2659739627_0_2.html

  10. [Protractor] Getting Started With Protractor

    Protractor is an end-to-end testing library for AngularJS. Install: npm install -g protractor This w ...