by WebSurfer
2013年1月27日 16:52
Ajax Control Toolkit の ModalPopup 内の iframe に別ページを表示し、その別ページに配置されているボタンをクリックして ModalPopup を非表示にする方法の紹介です。
ModalPopup はクライアントスクリプトで非表示にできます。それには、Modalpopup をページに配置するとダウンロードされるクライアントスクリプトに定義されている hide メソッドを使います。
従って、iframe に表示するページの適当な DOM に click イベントのリスナーを仕掛けて、それで hide メソッドを起動すれば ModalPopup を非表示にできます。
ただし、iframe に表示するページは親ページと同じドメインのものでないと DOM が取得できないので注意してください(クロスサイトスクリプト対策だそうです)。
そのサンプルコードを以下に書いておきます。また、実際に動かして試すことができるよう 実験室 にアップしました。興味のある方は試してみてください。
親ページ
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
//<![CDATA[
// iframe 内の document オブジェクトを取得。
// contentWindow は IE 用。
// contentDocument は Firefox 用。
function iframeRef(frameRef) {
return frameRef.contentWindow ?
frameRef.contentWindow.document :
frameRef.contentDocument;
}
function hideModalPopup() {
var modalPopup =
$find('programmaticModalPopupBehavior');
modalPopup.hide();
}
function showModalPopup() {
var ifm = iframeRef($get('iframe1'));
var btn = ifm.getElementById('hideButton');
// hide するとリスナーも解除されてしまうので、
// (btn.click が null になることで確認できる)
// ModalPopup を表示するたびリスナーをアタッチ
// する必要がある。
if (btn.onclick == null) {
if (window.addEventListener) {
btn.addEventListener('click',
hideModalPopup,
false);
} else if (window.attachEvent) {
btn.attachEvent('onclick',
hideModalPopup);
}
}
var modalPopup =
$find('programmaticModalPopupBehavior');
modalPopup.show();
}
//]]>
</script>
<style type="text/css">
/*Modal Popup*/
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.popup
{
background-color: White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<h1>ModalPopup Test</h1>
<asp:Button ID="DummyButton"
runat="server"
style="display: none;" />
<input type="button"
value="Show ModalPopup"
onclick="showModalPopup();" />
<asp:Panel
ID="Panel1"
runat="server"
CssClass="popup">
<iframe
id="iframe1"
src="190-PageIniframe.aspx">
</iframe>
</asp:Panel>
<asp:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
TargetControlID="DummyButton"
BehaviorID="programmaticModalPopupBehavior"
BackgroundCssClass="modalBackground"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
</form>
</body>
</html>
iframe に表示するページ
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Page in iframe</h1>
<input type="button"
id="hideButton"
value="Hide ModalPopup" />
</div>
</form>
</body>
</html>