原生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') ...
随机推荐
- 来一个可能防止恶意采集和爬虫的SH
没办法,公司的要求,还有,一些山寨爬虫完全不够我们运维人员的感觉, 一天爬虫搞个三四十万的LOG,那我只好干了.. 人家GOOGLE,BAIDU,一天大约也就五六千吧.. 有一个小的SSH技巧,是判断 ...
- Altium Designer summer 9 布线 - 差分对布线
差分信号系统是采用双绞线进行信号传输的,双绞线中的一条信号线传送原信号,另一条传送的是与原信号反相的信号.差分信号是为了解决信号源和负载之间没有良好的参考地连接而采用的方法,它对电子产品的干扰起到固有 ...
- 神舟飞船上的计算机使用什么操作系统，为什么是自研发不是 Linux？
中国航天用的SpaceOS主要内容是仿造美国风河系统公司的VxWorks653(653是产品名,并非版本号). 先解释为什么用这个系统不用Linux: 航天器的内存和CPU都非常弱,弱到什么程度呢:天 ...
- bootstrap 动态添加验证项和取消验证项
bootstrap 中的bootstrapValidator可以对前端的数据进行验证,但是有的时候我们需要动态的添加验证,这样需要我们动态的对bootstrapValidator的内容做修改. 传统的 ...
- linux下so动态库一些不为人知的秘密
linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识. 基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些 ...
- Andoid实现手动绘图
public class MainActivity extends Activity { int width,height; private GameView gameview; private Ca ...
- paip.输入法编程---增加码表类型
paip.输入法编程---增加码表类型 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/attil ...
- CSS3: box-sizing 属性的简单认识
定义和用法: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 默认值:content-box; 继承性:无: css版本:css3 语法:box-sizing: conten ...
- POJ burnside&&polya整理练习
POJ 2409 Let it Bead 这题就是polya公式的直接套用,唯一麻烦的是置换群的种类数,由于可以翻转,所以除了要加上pow(c,gcd(s,i))这些平面旋转的置换群,还要加上翻转的. ...
- 苹果的HomeKit协议
苹果的HomeKit协议非常底层,其作用仅限于让iOS平台和家居设备能够相互“握手”,但“认识”之后,想要继续控制灯.空调等设备,仍然需要家电厂商在HomeKit的基础上进行二次开发.