原生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') ...
随机推荐
- MFC动态创建按钮，并在按钮上实现位图的切换显示
动态创建按钮,并在按钮中添加位图,通过单击按钮显示不同的位图,可设置为显示按钮按下和弹起两种状态.只要判断a值从而输入不同的响应代码. 1.在头文件中添加: CButton *pBtn; 2.在初始化 ...
- 18个SaaS及其功能评价
SAAS软件及其功能评价1. 360 两个同步功能都不错,却被埋没了2. 够快云3. DBFen4. Seafile5. 坚果云6. DZ7. 百度云8. 1159. 迷你云10. 微云11. Dro ...
- alias, bg, bind, break, builtin, caller, cd, command,
bash, :, ., [, alias, bg, bind, break, builtin, caller, cd, command, compgen, complete, com ...
- 将大型 Page Blob 的页范围进行分段
Windows Azure 存储支持一种 Blob 类型,即 Page Blob.Page Blob 通过仅将已写入但未清除的页存入物理存储, 来有效存储稀疏数据.每页大小为 512 字节.Ge ...
- 将汉字转为UTF-8编码
01./** 02. * 将文件名中的汉字转为UTF8编码的串,以便下载时能正确显示另存的文件名. 03. * @param s 原文件名 04. * @return 重新编码后的文件名 05. */ ...
- Function对象
Function对象是js中很重要的一个元素,js中所有自定义的函数都是Function对象,所以String,Number,Boolean,function等都是Function对象.所以,在使用t ...
- 最近两场比赛 CF 285 & TC 646
Codeforces 285 这场rating又掉了,好在只掉了十多. 题目比较水,但是我比赛时居然只艰辛地过了前两道. 504A 由于图是森林,所以一定有度为1的点,把这些点删了后图还是森林.然后就 ...
- MTM量身定制系统 - 富友ERP产品 - 信息化推动服装行业管理软件升级
MTM量身定制系统 - 富友ERP产品 - 信息化推动服装行业管理软件升级 国内第一款量体定制管理系统 结合富友软件10年服装行业经验和多家大型量身定制企业管理经验,推出的 ...
- Spring MVC中各个filter的用法
转载:http://blog.csdn.net/qyp1314/article/details/42023725 Spring MVC中各个filter的用法 2014-12-19 09:08 105 ...
- MySQL查看数据库、表的占用空间大小
SELECT TABLE_NAME,DATA_LENGTH+INDEX_LENGTH,TABLE_ROWS FROM information_schema.tables WHERE TABLE_SCH ...