[程式筆記]blockUI.js的應用 - 在iframe上新增關閉鈕 @ 貓羽的文字日誌

這次的主題是很簡單，假設要使用blockui叫出一個右上有個x，按下該按鍵才會回到原本畫面的頁面，更進階一點的會要求回到主頁面時進行某些動作，這個功能要如何達成？這個問題會牽扯一些parent指令觀念，因此稍微在這裡做個筆記。

程式碼如下：(Default.aspx)
這部份就是記得加js檔，然後按鈕呼叫函式InsertItem2：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="blockUI_window_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery.blockUI.js"></script>
<style>
html, body, div {
margin: 0 auto;
text-align: center;
font-family:Microsoft JhengHei;
font-size:20px;
}
#Footer {
height: 20px;
position: relative;
margin-top: -20px;
bottom:0px;
}
#Main {
padding-bottom: 20px;
bottom:0px;
}
#container {
position: relative;
margin: 0 auto;
width: 200px;
text-align: left;
padding-bottom: 100px;
}
</style>
<script type="text/javascript">
//關小視窗
function ClosePanel() {
$.unblockUI();
}
//新增項目
function InsertItem2() {
$.blockUI({
message: $('<iframe name="UploadCusPointData" id="UploadCusPointData2" width="600px" height="350px" marginwidth="0" ' +
'marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" bordercolor="#ffffff"' +
'src="swindow1.aspx"></iframe>'),
baseZ: 5000,
//onOverlayClick: $.unblockUI,
css: {
top: ($(window).height() - 400) / 2 + 'px',
left: ($(window).width() - 600) / 2 + 'px',
cursor: 'default',
width: '600px',
height: '350px',
},
});
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="InsertItem" type="button" class='ProjectButtonStyle1' value="相關資訊請按我" onclick="return InsertItem2()" />
</div>
</form>
</body>
</html>

要讀取的iframe網頁：(swindow1.aspx)
這個網頁淺紫色為用貼一張有close圖片的div，而紅色字的部份是去抓父元素的函式，也就是呼叫上一層的Default.aspx的ClosePanel()這個函式。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="swindow1.aspx.cs" Inherits="blockUI_window_swindow1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="btnReset" onclick="return parent.ClosePanel()" style="float:right;"><img src="../images/close.png"/></div>
詳細資訊
</div>
</form>
</body>
</html>

最後執行結果一開始有個按鈕，按下後執行BLOCKUI並顯示iframe，如果按下這個iframe右上角的x就會回到主頁面。
此外function ClosePanel() {這個函式可以加上其他動作，例如刷新頁面之類的功能，就可以達到回到原頁面同時刷新的功能需求。
這個功能說穿了並不難，而且也很實用，就寫在這邊供參考。