原生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') ...
随机推荐
- ural 1052 Rabbit Hunt
http://acm.timus.ru/problem.aspx?space=1&num=1052 #include <cstdio> #include <cstring&g ...
- Linux/CentOS下的CST和UTC时间的区别以及不一致的解决方法
今天被我遇到了,相差八小时,,,tzselect过了都不行,还得用ntupdate核一下. 网上找的,备不时之需要. ~~~~~~~~~~~~~~~~ 1.在linux中,用date查看时间的时候显示 ...
- curl http认证
有些站点需要http认证.(apache认证:http://blog.csdn.net/zf213/article/details/4252592) 如果访问http://test:123789@xx ...
- CF-Mr. Kitayuta's Colorful Graph
B. Mr. Kitayuta's Colorful Graph time limit per test 1 second memory limit per test 256 megabytes in ...
- WINDOWS OPTIMIZE
WIN10 SHUT DOWN AUTOMATICALLY UPDATE 1.service -> windows update 2.gpedit ->计算机配置 - 管理模板 - Win ...
- C# 利用反射查看类的信息
using System; using System.Collections; using System.Collections.Generic; using System.Reflection; u ...
- Android中的windowSoftInputMode属性详解
这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下 在前面的一篇文章中 ...
- R语言——包的添加和使用
R是开源的软件工具,很多R语言用户和爱好者都会扩展R的功能模块,我们把这些模块称为包.我们可以通过下载安装这些已经写好的包来完成我们需要的任务工作. 包下载地址:https://cran.r-proj ...
- MVC Controller 基类中的Request
今天在测试自己MVC程序的时候发现之前写代码的一个BUG,需求是每个页面要获取当前URL链接中包含的城市ID,我把获取url的方法写到了Controller的基类BaseController(Base ...
- Ubunte 11.4 下安装 SSH遇到的问题
第一次安装报了一堆错,主要是也http 404 not found之类的,搜索了一番怀疑是apt的source list的问题. 网上找到一份替换之,我用的是搜狐的服务器.网址如下: http://b ...