原生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') ...

随机推荐

javascript 要注意的事项
记入一些容易出错的地方 function someClass() { this.name = null; 或 undefined } var obj = new someClass(); consol ...
布置第一个JBOSS服务器
还是要通过实践慢慢积累感觉.. SERVLET的制作,JAVAC的编译... package com.manning.jbia.intro; import java.io.IOException; i ...
Altium Designer 里面怎么画等长线
(1)一般是将走线布完后,新建一个class. Design -> Classes 如上图添加完后可以点击close. (2)快捷键 T + R: 或者点击Tools 下拉中的Interact ...
QT的文本加密方法（寒山居士）
http://blog.csdn.net/esonpo/article/details/12746315http://blog.csdn.net/esonpo/article/details/1174 ...
PowerShell 转码函数 Default->UTF8
$chs='你好' function converToUft8($str){ $bs=[System.Text.Encoding]::Default.GetBytes($str); $u8Char=[ ...
Manor
Description Bob有n个正整数,他将这n个整数根据大小划分成两部分.对于小于等于k的整数放在集合A中,其余的放在集合B中.每次他从集合B中取出一个最大的值,将其变成0放入A集合中.然后将A ...
笔记：java并发编程实践1
Java 5.0 adds ConcurrentHashMap, a replacement for synchronized hash-based Map implementations, and ...
ubuntu下，thinkphp验证码不能用
首先安装gd库使用apt-get方式为Ubuntu安装PHP+MYSQL+Apache 默认是没有GD库的 1.安装gd库命令:sudo apt-get install php5-gd 2.给权限 ...
HTTP Status 404(The requested resource is not available)的几种解决方法
原因:servlet没有配置正确 ,查看web.xml确认正确,以及自己的请求路径正确在IE中提示“404”错误有以下三种情况 1．未部署Web应用 2．URL输入错误排错方法: 首先,查看URL ...
ios 基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果demo
demo功能:基于CAEmitterLayer的雪花,烟花,火焰,爱心等效果. demo说明:基于Core Animation的粒子发射系统,粒子用CAEmitterCell来初始化. 粒子画在背景层 ...

原生js制作弹出框

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

随机推荐

热门专题