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