none
ModalPopupExtenderを呼び出し先から非表示にしたい RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    http://social.msdn.microsoft.com/Forums/ja-JP/aspnetja/thread/ac1d2060-86e9-400b-83cf-875518fe4418

    この内容もを基に、

    ASP.NET AJAXのModalPopupExtenderを使用して、別ページ（他のWebフォーム）の内容を表示しています。

    別ページの「OK」ボタンをクリックしたタイミングでポップアップを非表示にすることは可能でしょうか？

    2013年1月23日 0:35
    |

回答

  • Question
    サインインして投票
    0
    サインインして投票

    > レスの内容を基に、私なりにいろいろと試してみたのですが、
    > うまくいきませんでした・・・
    > もしよろしければサンプルコードを頂けないでしょうか？

    どのように試して、どこがうまくいかないか、具体的に、きちんと書いていただけませんか？

    また、一方的に質問・要求するだけでなく、私の先のレスの質問にも答えていただけませんか？

    次回はそのようにお願いします。

    検証に使ったコードをアップしておきます。

    親ページ

    <%@ 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[
        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');
            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>

    • 回答の候補に設定 佐伯玲 2013年1月31日 4:53
    • 回答としてマーク onionsword 2014年9月11日 6:30
    2013年1月25日 13:30
    |

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票

    > 別ページの「OK」ボタンをクリックしたタイミングでポップアップ
    > を非表示にすることは可能でしょうか？

    iframe に加えて Button を ModalPopup で表示する Panel に配置して、その Button でコンロトールするのはダメなのですか？

    それがダメなら・・・

    ModalPopup はクライアントスクリプトで非表示にできます。それには、ToolkitScriptManager によりダウンロードされたクライアントスクリプトで定義されている hide メソッドを使います。（詳しくは Ajax Control Toolkit のサイトからダウンロードできるサンプルのソースを見てください。）

    なので、iframe の中のどこか適当な DOM に click イベントのリスナーを仕掛けて、それで hide メソッドを起動すれば可能かもしれません（ここは未検証です・・・時間ができたらやってみます）。

    iframe の中の DOM オブジェクトの取得については以下のページが参考になると思います。

    How can I access iFrame elements with Javascript?
    http://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript

    • 回答の候補に設定 佐伯玲 2013年1月24日 8:12
    2013年1月23日 11:37
    |
  • Question
    サインインして投票
    0
    サインインして投票

    > iframe の中のどこか適当な DOM に click イベントのリスナーを仕掛けて、それで hide メソッドを起動

    ここのところを実際にコードを書いて検証してみましたが、ＯＫでした。ただし、iframe に表示するページは親ページと同じドメインのものでないと DOM は取得できないので注意してください（XSS 対策）。

    2013年1月24日 14:21
    |
  • Question
    サインインして投票
    0
    サインインして投票

    検証ありがとうございます。

    レスの内容を基に、私なりにいろいろと試してみたのですが、うまくいきませんでした・・・

    もしよろしければサンプルコードを頂けないでしょうか？

    2013年1月25日 0:33
    |
  • Question
    サインインして投票
    0
    サインインして投票

    > レスの内容を基に、私なりにいろいろと試してみたのですが、
    > うまくいきませんでした・・・
    > もしよろしければサンプルコードを頂けないでしょうか？

    どのように試して、どこがうまくいかないか、具体的に、きちんと書いていただけませんか？

    また、一方的に質問・要求するだけでなく、私の先のレスの質問にも答えていただけませんか？

    次回はそのようにお願いします。

    検証に使ったコードをアップしておきます。

    親ページ

    <%@ 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[
        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');
            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>

    • 回答の候補に設定 佐伯玲 2013年1月31日 4:53
    • 回答としてマーク onionsword 2014年9月11日 6:30
    2013年1月25日 13:30
    |