常常看到有些 FREE WEB MAIL 或 FREE BLOG 上 , 在功能操作當下會發現有些資料在改變時
或者在修改個人資料時會發現按下按鈕的同時整個 BROWSER 變灰 , 彈出了一個視景詢問你是否變更 , 或者是彈出的視景就是你要變更的資料目標 , 不是 javascript 那種的.
這就是今天要說的主題 , 我不知目前它有沒有正確的名稱 , 也不知該怎稱呼它...
這是利用CSS 加上 javascript 所形成的一種畫面操作行為 , 當這個功能被調用時整個 BROWSER 變灰無法操作 ( Frame 框架除外) , 就好像被一片玻離覆蓋一樣下面有個簡單的 SAMPLE , 全部COPY 下來就可以使用了...
<!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>
<title>Josh - Test</title>
<style type="text/css">
.opaqueLayer
{
display: none;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.6;
filter: alpha(opacity=60);
background-color: #000000;
z-index: 1000;
}
.questionLayer
{
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 100px;
display: none;
z-index: 1001;
border: 0px solid black;
background-color: #FFFFFF; /* */
text-align: center;
vertical-align: middle;
padding: 5px;
}
</style>
<script type="text/javascript">
function getBrowserHeight()
{
var intH = 0;
var intW = 0;
if(typeof window.innerWidth == 'number' )
{
intH = window.innerHeight;
intW = window.innerWidth;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
{
intH = document.documentElement.clientHeight;
intW = document.documentElement.clientWidth;
}
else if(document.body && (document.body.clientWidth || document.body.clientHeight))
{
intH = document.body.clientHeight;
intW = document.body.clientWidth;
}
return { width: parseInt(intW), height: parseInt(intH) };
}
function setLayerPosition()
{
var shadow = document.getElementById('shadow');
var question = document.getElementById('question');
var bws = getBrowserHeight();
shadow.style.width = bws.width + 'px';
shadow.style.height = bws.height + 'px';
question.style.left = parseInt((bws.width - 350) / 2);
question.style.top = parseInt((bws.height - 200) / 2);
shadow = null;
question = null;
}
function showLayer()
{
setLayerPosition();
var shadow = document.getElementById('shadow');
var question = document.getElementById('question');
shadow.style.display = 'block';
question.style.display = 'block';
shadow = null;
question = null;
}
function hideLayer()
{
var shadow = document.getElementById('shadow');
var question = document.getElementById('question');
shadow.style.display = 'none';
question.style.display = 'none';
shadow = null;
question = null;
}
window.onresize = setLayerPosition;
</script>
</head>
<body>
<div id="shadow" class="opaqueLayer">
</div>
<div id="question" class="questionLayer">
<br />
Hello World !!!
<br />
<input type="button" onclick="hideLayer();" value="OK" />
<br />
</div>
<h3>
Modal Layer Test
</h3>
Click the button below to display the "modal" layer
<br />
<input type="button" onclick="showLayer();" value="ShowLayer" />
</body>
</html>
沒有留言:
張貼留言