js簡(jiǎn)單的彈出框有關(guān)閉按鈕
更新時(shí)間：2014年05月05日 10:22:55 作者：
這篇文章主要介紹了使用js做的一個(gè)簡(jiǎn)單的彈出框且有關(guān)閉按鈕,需要的朋友可以參考下
復(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=utf-8" />
<title>簡(jiǎn)易彈出框</title>
<style type="text/css">
.mydiv {
background-color: #ff6;
border: 5px 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=10);/*IE*/
opacity:0.8;/*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/>彈框內(nèi)容<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="點(diǎn)此彈框" onclick="javascript:showDiv()" />
</div>
</body>
</html>
相關(guān)文章
javascript 動(dòng)態(tài)參數(shù)判空操作
在做交友中心的頁(yè)面的時(shí)候，有一個(gè)javascript函數(shù)，它的第二個(gè)參數(shù)是動(dòng)態(tài)的。2008-12-12
JavaScript同步與異步任務(wù)問(wèn)題詳解
這篇文章主要介紹了JavaScript事件循環(huán)同步任務(wù)與異步任務(wù)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
通過(guò)action傳過(guò)來(lái)的值在option獲取進(jìn)行驗(yàn)證的方法
通過(guò)action傳過(guò)來(lái)的值在option獲取進(jìn)行驗(yàn)證，下面有個(gè)不錯(cuò)的示例，需要的朋友不要錯(cuò)過(guò)2013-11-11
完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖（上篇）
這篇文章主要介紹了完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖的具體資料，基于完美運(yùn)動(dòng)框架move2.js而完成的八種焦點(diǎn)錄播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JS自定義選項(xiàng)卡函數(shù)及用法實(shí)例分析
這篇文章主要介紹了JS自定義選項(xiàng)卡函數(shù)及用法,以實(shí)例形式較為詳細(xì)的分析了javascript自定義tab切換函數(shù)及使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章介紹了Mac地址驗(yàn)證的javascript代碼，在路由器中，mac地址是用得比較多的2013-11-11
JS+HTML實(shí)現(xiàn)的圓形可點(diǎn)擊區(qū)域示例【3種方法】
這篇文章主要介紹了JS+HTML實(shí)現(xiàn)的圓形可點(diǎn)擊區(qū)域,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML元素屬性實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
我們?cè)?jīng)講過(guò)JS由三部分組成，其中一個(gè)部分就是BOM，用于對(duì)瀏覽器進(jìn)行操作。這篇文章我們主要來(lái)介紹BOM應(yīng)用，感興趣的朋友一起看看吧2018-02-02
這里給大家推薦一個(gè)自己封裝的常用的javascript函數(shù)，基本上常見(jiàn)的操作都包含在內(nèi)了，有需要的小伙伴直接拿走使用吧。2015-01-01