為了讓程式畫面美觀，底下程式碼會稍微多了點，但其實，方法與原理不難。
- 把網頁主體先完成之後，準備好一個按鈕，或某個觸發的點，可以觸發事件。
- 在主體層上堆一層「遮罩層」。這層設定寬、高都是100％，然後設定透明度opacity:0.85或0.95（自己看喜歡怎樣的感覺來調整）;然後這層在包含著DIV，這個DIV就是用來當對話框用的，你可以在這個DIV當中繼續包入其他元素，記得要包含個按鈕或圖示可以把對話框「關掉」的。
- 將「遮罩層」設定好一個控制函式，根據傳入參數來設定「遮罩層」，來把「遮罩層」給隱藏或打開來。
<!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" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!-- Script 區段 -->
<script language='JavaScript' type='text/JavaScript'>
// 按下「X」圖隱藏遮罩層
$(".closeDialog").click(function()
{
ShowModalDialog( false );
});
// 按鈕後顯示遮罩層
$(".btnOpenModal").click(function()
{
ShowModalDialog( true );
});
function ShowModalDialog( YesOrNo )
{
if ( true == YesOrNo )
{
$(".DivOverlapMask").css( "visibility", "visible" );
$(".DivDialog").css( "visibility", "visible" );
$(".closeDialog").css( "visibility", "visible" );
}
else
{
$(".DivOverlapMask").css( "visibility", "hidden" );
$(".DivDialog").css( "visibility", "hidden" );
$(".closeDialog").css( "visibility", "hidden" );
}
}
})
</script>
<!-- CSS 區段 -->
<style type="text/css">
/* 只是背景 */
.DivGround
{
position: absolute;
width: 400px;
height: 300px;
top: 30px;
left: 30px;
border: solid;
background-color: #66ccff;
text-align:center;
}
/* 遮罩，將整個瀏覽器佈滿，讓原本背景層都無法點選 */
.DivOverlapMask
{
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
margin:0;
padding:0;
background:gray;
opacity:0.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
visibility:hidden;
}
/* Modal Dialog 層 */
.DivDialog
{
position:fixed;
width:200px;
height:100px;
margin:0;
padding:0;
left:100px;
top:100px;
background-color: #eeaaaa;
border-radius: 10px;
visibility:hidden;
}
/*「X」按鈕 */
.closeDialog
{
position:absolute;
width:32px;
height:32px;
right:8px;
top:8px;
cursor:pointer;
visibility:hidden;
}
</style>
<title>無標題文件</title>
</head>
<body>
<!-- Modal Dialog 的原理就是在背景層（可以很多層）之上，蓋上一層遮罩，最後給一個DIV當成對
話框 -->
<div class= "DivGround">
<button class = "btnOpenModal" > 開 啟 </button>
<div class = "DivOverlapMask" >
<div class = "DivDialog">
<img class = "closeDialog" src="img/close-button.png" ></img> </div>
</div>
</div>
</body>
</html>
沒有留言:
張貼留言