DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> CSS基礎:兼容IE與Firefox的透明DIV提示框
CSS基礎:兼容IE與Firefox的透明DIV提示框
編輯:Dreamweaver相關     

<html>
<head>
<style>
body{}{
margin:0px;
}
</style>
<title></title>
<script>
function DivAlert(messageDiv){
this.messageDIV=messageDiv;
//創建提示框底層
    this.bottomDIV = document.createElement("div");
//獲取body中間點
    var x=document.body.clientWidth/2,y=document.body.clientHeight/2;
//配置樣式
    this.bottomDIV.style.opacity="0.50";
this.bottomDIV.style.filter=

"Alpha(opacity=50);";
this.bottomDIV.style.backgroundColor="#CCCCCC";
this.bottomDIV.style.height=document.body.scrollHeight+"px";
this.bottomDIV.style.width="100%";
this.bottomDIV.style.marginTop="0px";
this.bottomDIV.style.marginLeft="0px";
this.bottomDIV.style.position="absolute";
this.bottomDIV.style.top="0px";
this.bottomDIV.style.left="0px";
this.bottomDIV.style.zIndex=100;
//顯示提示框
    this

.show = function(){
//顯示提示框底層
          document.body.appendChild(this.bottomDIV);
//顯示messageDIV
        document.body.appendChild(this.messageDIV);
//把messageDIV定位到body中間
        this.messageDIV.style.position="absolute";
x=x-this.messageDIV.clientWidth/2;
y=y-this.messageDIV.clientHeight/2;
this.messageDIV.style.top=y+"px";
this.messageDIV.style.left=x+"px";
this.messageDIV.style.zIndex=101;
}
//移除提示框
     

this.remove = function(){
document.body.removeChild(this.bottomDIV);
document.body.removeChild(this.messageDIV);
}
}
//測試DivAlert對象
var dc;
function test(){
//創建提示框內容部分
     var d = document.createElement("div");
d.style.width="220px";
d.style.height="150px";
d.style.backgroundColor="#AA00CC";
d.style.padding="10px";
//向提示框內容部分畫需要顯示的信息
     d.innerHTML="Hello World<br/><input type="button" style="color:#cc4044" value="close this DivAlert" onclick="test2()"/>"
//實例化提示框
     dc = new DivAlert(d);
//顯示提示框


     dc.show();
}
//提示框裡的Button按鈕點擊事件
function test2(){
//移除對話框
    dc.remove();
}
</script>
</head>
<body>
<a href="javascript:void(0)" onClick="test();">click</a>
</body>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved