原生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') ...
随机推荐
- jmap命令结合mat插件分析内存泄露--OQL
http://smallnetvisitor.iteye.com/blog/1826434 User.java package gc; import java.util.ArrayList; impo ...
- 什么时候使用NO_UNNEST
select * from test a where object_id in (select department_id from hr.dept_1 dept where department_i ...
- 【HDOJ】4515 小Q系列故事——世界上最遥远的距离
简单题目,先把时间都归到整年,然后再计算.同时为了防止减法出现xx月00日的情况,需要将d先多增加1,再恢复回来. #include <cstdio> #include <cstri ...
- Shell中特殊的变量
$表示当前的进程,当使用echo $$是会输出当前shell的pid echo $$ 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例 ...
- MYSQL存储过程和函数学习笔记
学至Tarena金牌讲师,金色晨曦科技公司技术总监沙利穆课程笔记的综合. 1. 什么是存储过程和函数 将SQL语句放入一个集合里,然后直接调用存储过程和函数来执行已经定义好的SQL语句,通过存储过程和 ...
- Ajax解析
1.Ajax Asynchronous(异步的) javascript and xml 技术组成: CSS + xml +JavaScript +DOM Ajax核心对象: XmlHttpReques ...
- DES加解密算法Qt实现
算法解密qt加密table64bit [声明] (1) 本文源码 大部分源码来自:DES算法代码.在此基础上,利用Qt编程进行了改写,实现了DES加解密算法,并添加了文件加解密功能.在此对署名为b ...
- VLV INDEX
Normally, when the Directory Server conducts a search, the server looks through the entire entry for ...
- Gradle的简介、安装与配置
Gradle介绍 Gradle是一个基于JVM的构建工具,它提供了: 像Ant一样,通用灵活的构建工具,对Ant的任务做了很好的集成 同Maven一样是基于约定的构建框架 强大的多工程构建支持.有广泛 ...
- Java多线程练习二
public class ex3 { public static void main(String [] args) { thread2 t1 = new thread2("hello&qu ...