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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
浅谈javascript错误处理
Aug 11 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
微信小程序实现购物车功能
Nov 18 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
python如何删除文件、目录
2020/06/23 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
促销活动总结报告
2014/04/26 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年班组长工作总结
2015/04/10 职场文书
单位工作证明范本
2015/06/15 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
SQLServer常见数学函数梳理总结
2022/08/05 MySQL