手机
当前位置:查字典教程网 >网页设计 >XHTML >html 弹出div实现移动居中非常好用
html 弹出div实现移动居中非常好用
摘要:无标题文档/*弹出层的STYLE*/html,body{height:100%;margin:0px;font-size:12px;}.my...

<!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">

/*弹出层的STYLE*/

html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {

background-color: #ff6;

border: 1px 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=50);/*IE*/

opacity:0.5;/*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">标题<br/>你懂得<br/>

<a href="javascript:closeDiv()">关闭窗口</a></div>

<div id="bg"></div>

<div>

<input type="Submit" name="" value="显示层" />

</div>

</body>

</html>

附加一个好看的样式

<html>

<head><title></title>

<style>

.mesWindowTop {

font-size: 12px;

font-weight: bold;

text-align: left;

}

.mesWindowContent {

font-size: 12px;

}

.mesWindow {

background: none repeat scroll 0 0 #FFFFFF;

border: 1px solid #666666;

}

</style>

</head>

<body>

<div id="mesWindow"><div><table width="100%" height="100%"><tbody><tr><td>窗口标题</td><td><input type="button" value="关闭" title="关闭窗口"></td></tr></tbody></table></div><div id="mesWindowContent"><div>消息正文</div></div><div></div></div>

</body>

</html>

【html 弹出div实现移动居中非常好用】相关文章:

html中常用的标签总结(必看)

html 隐藏滚动条的简单实现

html无序列表标签和有序列表标签使用示例

谈html mailto(电子邮件)实际应用

html中用href 实现点击链接弹出文件下载对话框

html左右布局示例代码

html 自定义标签使用实现方法

html body标签详解与html常用的控制标记

html标签a的target属性的用法

html+css布局的三种方式(自然布局/流动布局/定位布局)

精品推荐
分类导航