js简单的弹出框有关闭按钮
<!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>
最新文章
- Visual Studio高级调试技巧
- Android想服务器传图片,透过流的方式。还有读取服务器图片(文件),也通过流的方式。
- Oracle to_char()函数的使用细则
- 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)
- PHP6连接SQLServer2005的方法
- InputStream复用,mark和reset
- web页面状态
- js 对象深复制,创建对象和继承
- 【codevs1993】草地排水 最大流
- .Net AppDomain.CurrentDomain.AppendPrivatePath(@";Libs";);
- Objective-C之null NaN undefined
- Sets 比赛时想错方向了。。。。 (大数不能处理负数啊)
- [一] java8 函数式编程入门 什么是函数式编程 函数接口概念 流和收集器基本概念
- zookeeper及kafka集群搭建
- OAF 抛出html消息
- es某个分片受损或卡在INITIALIZING状态时解决办法
- inner join, left join, right join 和 full join
- UnityShader中的语义相关
- HDU 6143 17多校8 Killer Names(组合数学)
- aix系统下的websphere的静默安装
热门文章
- CocoaPods did not set the base configuration of your project 问题解决方式
- 随记MySQL的时间差函数(TIMESTAMPDIFF、DATEDIFF)、日期转换计算函数(date_add、day、date_format、str_to_date)
- SparkStreaming操作Kafka
- gulp-uglify的使用
- 工作流模式 (zhuan)
- mysql 5.7.13 安装配置方法图文教程(win10) (转)
- 【AUC】二分类模型的评价指标ROC Curve
- Zabbix添加自定义监控项(一)
- Idea2016配置并破解jrebel
- 关于Unity树形插件Tree View Control的相关搜集