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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php HTML无刷新提交表单
2016/04/05 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
自荐信格式
2013/12/01 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技