JS 彈出層 定位至屏幕居中示例
更新時(shí)間：2014年05月21日 11:51:17 作者：
彈出層想必大家都有見過(guò)吧，本示例介紹的是一個(gè)定位至屏幕居中的彈出層，個(gè)人感覺效果還不錯(cuò)，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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>無(wú)標(biāo)題文檔</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/>你的成績(jī)?yōu)?60分<br/>
<a href="javascript:closeDiv()">關(guān)閉窗口</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>
相關(guān)文章
JavaScript實(shí)現(xiàn)圖片放大預(yù)覽效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片放大預(yù)覽效果，幫助大家更好的理解和制作JavaScript特效，感興趣的朋友可以了解下2020-11-11
js實(shí)現(xiàn)點(diǎn)擊展開隱藏效果（實(shí)例代碼）
本篇文章小編給大家?guī)?lái)一篇關(guān)于JS實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊隱藏的效果代碼內(nèi)容，有興趣的朋友參考下。2018-09-09
一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門類型安全的編程語(yǔ)言，TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型，幫助我們更好地定義和操作數(shù)據(jù)，下面小編就來(lái)和大家詳細(xì)聊聊這些數(shù)據(jù)類型的相關(guān)知識(shí)吧2023-06-06
javascript實(shí)現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法小結(jié)【5種方式】
這篇文章主要介紹了javascript實(shí)現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法,結(jié)合實(shí)例形式分析了5種常用的數(shù)字轉(zhuǎn)換的常用方法,涉及字符串與正則操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
微信小程序底部tabBar遮擋內(nèi)容的簡(jiǎn)單處理方法
幾乎每個(gè)app都會(huì)用到底部導(dǎo)航的,相對(duì)于小程序而言自然也是如此了,這篇文章主要給大家介紹了關(guān)于微信小程序底部tabBar遮擋內(nèi)容的簡(jiǎn)單處理方法,需要的朋友可以參考下2021-08-08
ionic App問題總結(jié)系列之ionic點(diǎn)擊系統(tǒng)返回鍵退出App
本篇文章主要介紹了ionic App問題總結(jié)系列之ionic點(diǎn)擊系統(tǒng)返回鍵退出App，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實(shí)例形式分析了微信小程序使用wx.setNavigationBarTitle接口動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車小功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
下面小編就為大家?guī)?lái)一篇基于Require.js使用方法(總結(jié))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12