首頁 > web前端 > html教學 > html 彈出div實作行動居中非常好用_HTML/Xhtml_網頁製作

html 彈出div實作行動居中非常好用_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:38:52
原創
1302 人瀏覽過

複製代碼
代碼如下:

br />

UBL "-// DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



無標題文件 <br><style type="text/css"> <br />/*彈出層的STYLE*/ <br />html,body {height:100%; margin:0px; font-size:12px;} <br />.mydiv { <br />background-color: #ff6; <br />border: 1px solid #f90; <br />text-align: center; <br />line-height: 40px; <br />font-size : 12px; <br />font-weight: bold; <br />z-index:99; <br />width: 300px; <br />height: 120px; <br />left:50%;/*FF IE7*/ <br />top: 50%;/*FF IE7*/ <br />margin-left:-150px!important;/*FF IE7 該值為本身寬的一半*/ <br />margin-top:-60px!important; /*FF IE7 該值為本身高的一半*/ <br />margin-top:0px; <br />position:fixed!important;/*FF IE7*/ <br />position:absolute;/*IE6*/ <br />_top: expression(eval(document.compatMode && <br />document.compatMode=='CSS1Compat') ? <br />documentElement.scrollTop (document*documentElement.clientHeight-this.offsetHeightIE. <br />document.body.scrollTop (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ <br />} <br />.bg { <br />background-color: #cccc>} <br />.bg { <br />background-color: #cccc ; <br />width: 100%; <br />height: 100%; <br />left:0; <br />top:0;/*FF IE7*/ <br />filter:alpha(opacity=50);/ *IE*/ <br />opacity:0.5;/*FF*/ <br />z-index:1; <br />position:fixed!important;/*FF IE7*/ <br />position:absolute;/*IE6 */ <br />_top: expression(eval(document.compatMode && <br />document.compatMode=='CSS1Compat') ? <br />documentElement.scrollTop (document.documentElement.clientHeight-this.offsetHeight)/2 /* IE6*/ <br />document.body.scrollTop (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ <br />} <br />/*The END*/ <br /> </style> <br><script type="text/javascript"> <br />function showDiv(){ <br />document.getElementById('popDiv').style.display='block'; <br />document. getElementById('bg').style.display='block'; <br />} <br />function closeDiv(){ <br />document.getElementById('popDiv').style.display='none'; <br /> document.getElementById('bg').style.display='none'; <br />} <br /></script> <br> <br>








































html> 附加一個好看的樣式複製程式碼複製程式碼複製程式碼複製碼>


標題>

.mesWindowTop {
字體大小:12px;
字體粗體:粗體;
文字對齊:左;
}
.mesWindowContent {
字體大小:12px;
}
.mesWindow {
背景:無重複滾動 0 #FFFFFF;
邊框:1px實線#666666;
}
樣式>
頭>

視窗標題
訊息正文

身體>

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板