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的siblings效果的js代码
Aug 09 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
react中Suspense的使用详解
Sep 01 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
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
动态加载jQuery的方法
2015/06/16 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python检索特定内容的文本文件实例
2018/06/05 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
python 解压pkl文件的方法
2018/10/25 Python
详解python中sort排序使用
2019/03/23 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python文件操作函数用法实例详解
2019/12/24 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
测量工程专业求职信
2014/02/24 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
消防宣传语大全
2015/07/13 职场文书
python实现A*寻路算法
2021/06/13 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技