如何通过单击外部关闭 ajax 模式弹出窗口答案

【问题标题】：how to close ajax modal popup with clicking outside如何通过单击外部关闭 ajax 模式弹出窗口
【发布时间】：2012-06-14 07:38:35
【问题描述】：

我正在用 c# asp.net 编写一个网页。该页面正在使用母版页。我在页面中有一个 ajax 模式弹出窗口。我想为此弹出窗口添加 2 个功能：

当用户在模式弹出窗口之外点击时关闭弹出窗口
在模式弹出窗口关闭后触发服务器端代码。

stackoverflow 上也有类似的问题，但几乎都是与 jquery modal popups 相关的。

这是我的代码：

<asp:Button ID="Button1" runat="server" Style="display: none" />
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="btnOkay"
        TargetControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
        Drag="true" BackgroundCssClass="ModalPopupBG">
    </asp:ModalPopupExtender>
    <asp:Panel ID="Panel1" runat="server" CssClass="PopupCss">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table style="width: 100%; height: 825px;">
                    <tr>
                        <td>
                            <div id="mediaplayer">
                                JW Player goes here</div>
                            <script type="text/javascript">
                                jwplayer("mediaplayer").setup({
                                    flashplayer: "jwplayer/player.swf",
                                    file: "<%=videoName %>",
                                    image: "<%=videoThumb %>",
                                    width: "100%",
                                    height: "100%"
                                });
                            </script>
                        </td>
                        <td valign="top" align="left" style="text-align: left;">
                            <div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="true">
                            </div>
                            <br />
                            <div class="fb-comments" data-href="<%=videoLink%>" data-num-posts="3" data-width="470">
                            </div>
                            <br />
                            <br />
                            <br />
                            <!-- AddThis Button BEGIN -->
                            <div class="addthis_toolbox addthis_default_style ">
                                <a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2">
                                </a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4">
                                </a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style">
                                </a>
                            </div>
                            <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f61d99d08697325"></script>
                            <!-- AddThis Button END -->
                            <br />
                            <br />
                            <asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled"
                                AutoPostBack="false" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty"
                                WaitingStarCssClass="ratingStarEmpty">
                                <asp:HiddenField ID="HiddenField1" runat="server" Value='<%=videoId%>' />
                            </asp:Rating>
                            &nbsp (<%=voteCount%>)
                            <br />
                            Minder Score:
                            <%=minderScore %>
                            <br />
                            <div class="Controls" style="text-align: left;">
                                <input id="btnOkay" type="button" value="Kapat" />
                            </div>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>

在后面的代码中，我用这一行显示弹出窗口：

ModalPopupExtender1.Show();

任何帮助将不胜感激。提前致谢。

【问题讨论】：

你能展示你用来创建弹出窗口的代码吗
@Jupaol 我添加了代码。该面板有一个带有社交插件的视频、一个评级控制和 facebook 评论插件。谢谢。

标签： c# asp.net ajax modalpopupextender

【解决方案1】：

要使用 javascript 隐藏/显示 modalpopuextender，请尝试：

function hidemodal() {
$find('ModalPopupExtender1').hide();
}

function showmodal() {
$find('ModalPopupExtender1').show();
}

您可以在单击事件或其他情况下引发该 hidemodal() 方法。

您还可以在 hidemodal() 方法中添加代码，使用 PageMethods 从 javascript 调用服务器端脚本来触发服务器端功能。在网上查找有关asp.net PageMethods的信息

function hidemodal() {
$find('ModalPopupExtender1').hide();
PageMethods.AnyServerFunction(param, onsuccess_callback);
}

function onsuccess_callback() {
}

问候，

【讨论】：

嗨，如何将模态外部的单击绑定到 hidemodal 函数，我在哪里调用该函数？谢谢。
我认为很难在模态之外单击，因为 modalpopup 的性质是阻止在模态关闭之前访问父级。我能想到的一种方法是在 body / form keydown 事件中捕获 ESC 键，即使用 javascript: function hidemodal() { var keycode = window.event.keyCode; if (keycode == 27) { $find("ModalPopupExtender1").hide(); } }

【解决方案2】：

可以在body上绑定click事件，在click里面设置e.stopPropagation();，之后就可以检查被点击的元素是不是popup元素，如果是，什么都不做，不是，关闭弹出窗口

【讨论】：