js简单的弹出框有关闭按钮


Posted in Javascript onMay 05, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简易弹出框</title> 
<style type="text/css"> 
.mydiv { 
background-color: #ff6; 
border: 5px solid #f90; 
text-align: center; 
line-height: 40px; 
font-size: 12px; 
font-weight: bold; 
z-index:99; 
width: 300px; 
height: 120px; 
left:50%;/*FF IE7*/ 
top: 50%;/*FF IE7*/ margin-left:-150px!important;/*FF IE7 */ 
margin-top:-60px!important;/*FF IE7 */ 
margin-top:0px; 
position:fixed!important;/*FF IE7*/ 
position:absolute;/*IE6*/ 
_top: expression(eval(document.compatMode && 
document.compatMode=='CSS1Compat') ? 
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 
} 
.bg { 
background-color: #ccc; 
width: 100%; 
height: 100%; 
left:0; 
top:0;/*FF IE7*/ 
filter:alpha(opacity=10);/*IE*/ 
opacity:0.8;/*FF*/ 
z-index:1; 
position:fixed!important;/*FF IE7*/ 
position:absolute;/*IE6*/ 
_top: expression(eval(document.compatMode && 
document.compatMode=='CSS1Compat') ? 
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 
} 
/*The END*/ 
</style> 
<script type="text/javascript"> 
function showDiv(){ 
document.getElementById('popDiv').style.display='block'; 
document.getElementById('bg').style.display='block'; 
} 
function closeDiv(){ 
document.getElementById('popDiv').style.display='none'; 
document.getElementById('bg').style.display='none'; 
} 
</script> 
</head> 
<body> 
<div id="popDiv" class="mydiv" style="display:none;"><br/>弹框内容<br/> 
<a href="javascript:closeDiv()">关闭</a></div> 
<div id="bg" class="bg" style="display:none;"></div> 
<div style="padding-top: 20px;"> 
<input type="Submit" name="" value="点此弹框" onclick="javascript:showDiv()" /> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
vue实现a标签点击高亮方法
Mar 17 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 #Javascript
JS判断、校验MAC地址的2个实例
May 05 #Javascript
JQuery EasyUI 数字格式化处理示例
May 05 #Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 #Javascript
javascript生成随机颜色示例代码
May 05 #Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 #Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP内核探索:变量概述
2014/01/30 PHP
简单谈谈favicon
2015/06/10 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
python搜索指定目录的方法
2015/04/29 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Python中SQLite如何使用
2020/05/27 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
后勤工作职责
2013/12/22 职场文书
高级编程求职信模板
2014/02/16 职场文书
文明班级申报材料
2014/12/24 职场文书
学期个人工作总结
2015/02/13 职场文书
党员转正大会主持词
2015/07/02 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
python基础之类方法和静态方法
2021/10/24 Python
SQLServer常见数学函数梳理总结
2022/08/05 MySQL