js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法

更新時(shí)間：2015年02月26日 15:38:44 作者：代碼家園

這篇文章主要介紹了js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法,涉及javascript操作彈出div層的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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>js+CSS彈出居中的背景半透明div層</title>

<style type="text/css">

body{margin:0px;}

#bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}

#popbox{position:absolute;width:400px; height:400px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#666666;}

</style>

<script type="text/javascript">

function pupopen(){

         document.getElementById("bg").style.display="block";

            document.getElementById("popbox").style.display="block" ; 

 }

function pupclose(){

document.getElementById("bg").style.display="none";

            document.getElementById("popbox").style.display="none" ; 

}

</script>

</head>

<body>

 </br>

CSS彈出層，或者說是彈出窗口，背景半透明風(fēng)格的彈出框，</br>在網(wǎng)站登錄、用戶注冊(cè)、公告提示方面都非常適合使用。</br>IE和FF,OP均可以~彈出窗口,背景半透明 </br>

　　原理:兩個(gè)層,一個(gè)高度和寬度都是100%,另一個(gè)就是你要彈出的窗口的具體內(nèi)容,</br>半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60; 

</br></br>　　 <a href="#" onclick="pupopen()">點(diǎn)擊這里打開窗口</a>

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

<div id="popbox">兩個(gè)層,一個(gè)高度和寬度都是100%,另一個(gè)就是你要彈出的窗口的具體內(nèi)容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;

<br>

<br>

<br>

<a href="#"  onclick="pupclose()">點(diǎn)擊關(guān)閉窗口</a>

</div>

</body>

</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)網(wǎng)頁版貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁版貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
JS控制FileUpload的上傳文件類型實(shí)例代碼
下面小編就為大家?guī)硪黄狫S控制FileUpload的上傳文件類型實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
客戶端限制只能上傳jpg格式圖片的js代碼
客戶端限制只能上傳jpg格式圖片的js代碼,對(duì)用戶體驗(yàn)較好，適合網(wǎng)頁中只能使用jpg格式圖片的情況。
2010-12-12
處理JavaScript浮點(diǎn)數(shù)精度問題的解決方案
在開發(fā)過程中,特別是涉及到金額計(jì)算或需要精確比較的場(chǎng)景,浮點(diǎn)數(shù)精度問題是一個(gè)常見而重要的挑戰(zhàn),本文將介紹在JavaScript中如何識(shí)別、理解和解決這些問題,并提供一些實(shí)用的技巧和建議,需要的朋友可以參考下
2024-06-06
JS 判斷代碼全收集
js判斷代碼，比較全，大家可以看下代碼，熟悉常見判斷代碼。
2009-04-04
JS中this上下文對(duì)象使用方式
這篇文章主要為大家詳細(xì)介紹了JS中this上下文對(duì)象使用方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
TypeScript遍歷Array的方法(for,forEach,every)
本文主要介紹了TypeScript遍歷Array的方法(for,forEach,every)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
JS跨域請(qǐng)求的問題解析
在本篇內(nèi)容里小編給大家整理了關(guān)于解決JS跨域請(qǐng)求的問題知識(shí)點(diǎn)，需要的朋友們參考學(xué)習(xí)下。
2018-12-12
微信小程序云開發(fā)詳細(xì)教程
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)的詳細(xì)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
js自動(dòng)閉合html標(biāo)簽(自動(dòng)補(bǔ)全html標(biāo)記)
假如我有一個(gè)DIV，如果沒有閉合后面的樣式都會(huì)亂了，這樣的代碼可能會(huì)影響后面的樣式，我希望用ＪＳ去自動(dòng)閉合這種沒有閉合的標(biāo)簽
2012-10-10