原生js制作弹出框

完整代码

 <!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制作弹出框的更多相关文章

js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
js 常见弹出框学习
模拟系统的弹出框系统自带的弹出框总结链接 http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...
【原创】贡献一个JS的弹出框代码...
一.前言最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...
js登录弹出框插件
第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...
jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框代码: var a = "Hello ...
js swal()弹出框
做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...
js实现弹出框的拖拽
//HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...
js实现弹出框跟随鼠标移动
又是新的一天网上冲浪,在bing的搜索页面下看到这样一个效果: 即弹出框随着鼠标的移动而移动.思路大概为: 调用onmousemove函数,将鼠标的当前位置赋予弹出框即可 //html <div ...
jsp页面制作弹出框
各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript> <!-- window.open ('page.html') ...

随机推荐

rsyslog 解决日志截断不读取问题
reopenOnTruncate [on/off] (requires v8.16.0+) Default: off 这是一个实验性的东西告诉rsyslog 重新input file 当它被trunc ...
【HDOJ】1080 Human Gene Functions
DP.wa了一下午,原来是把mmax写在外层循环了.最近事情太多了,刷题根本没状态. #include <cstdio> #include <cstring> #include ...
vsftpd,tftp安装配置
一. 对比共同点:都包含ftp不同点:1)vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.你可以通过ftp客户端上传下载软件.可设置访问用户名密码,或匿名anonymous登陆.默认 ...
delphi7编写客户端调用java服务器端webservice示例
1. 首先取得java-webservice服务器端地址.我的是:http://localhost:8080/mywebservice/services/mywebservice?wsdl 2. 然后 ...
cf202-div 1-B - Apple Tree：搜索，数论，树的遍历
http://codeforces.com/contest/348/problem/B B. Apple Tree time limit per test 2 seconds memory l ...
fzu1759：数论高次幂降幂
题目大意: 求 a^b mod c的值..但是b会非常大(10^1000000) 所以需要用到一个数论公式: A^x = A^(x % Phi(C) + Phi(C)) (mod C) 证明见ac大神 ...
zookeeper[2] zookeeper原理（转）
转自:http://cailin.iteye.com/blog/2014486 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现 ...
Oracle_Q&A_01
Step01: SHOW USER DESCRIPTION Step02:QUESTION & ANSWER --查询员工姓名和职位字数相等的员工 SELECT * from emp wher ...
IT江湖
我喜欢看武侠电影,尤其的70-80年代的邵氏电影,在这个期间,邵氏公司将金庸和古老很多小说都改拍成了电影,可以说,看这些电影是一种享受,真的! 对于现实中的IT世界,也像是一个江湖,当你掌握了一些技能 ...
nexus5 root教程
转载自: http://www.inexus.co/article-1280-1.html http://www.pc6.com/edu/71016.html https://download.cha ...

原生js制作弹出框

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

随机推荐

热门专题