足球游戏_中国足彩网¥体育资讯$

html 弹出div实现移动居中非常好用
来源:易贤网 阅读:940 次 日期:2016-06-16 14:11:34
温馨提示:易贤网小编为您整理了“html 弹出div实现移动居中非常好用”,方便广大网友查阅!

代码如下:

<!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=gbk" />

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

附加一个好看的样式

代码如下:

<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" class="mesWindow" style="top: 180px; position: absolute; width: 600px; margin-left: -300px; left: 50%; z-index: 9999;"><div class="mesWindowTop"><table width="100%" height="100%"><tbody><tr><td>窗口标题</td><td style="width:1px;"><input type="button" value="关闭" class="close" title="关闭窗口" onclick="closeWindow();"></td></tr></tbody></table></div><div id="mesWindowContent" class="mesWindowContent"><div style="padding:20px 0 20px 0;text-align:center">消息正文</div></div><div class="mesWindowBottom"></div></div>

</body>

</html>

中国足彩网信息请查看网页制作
易贤网手机网站地址:html 弹出div实现移动居中非常好用
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标