c# - 希望能够在其外部单击时关闭模态弹出窗口

Question

我有一个模态弹出扩展器和一个位于更新面板内的面板。我确实有一个与 CancelControlId 绑定(bind)的关闭按钮。但是，我希望能够在我的模式/面板之外单击以关闭面板。 (而不是使用关闭按钮)。

我尝试了一些东西和一个插件 clickoutside。似乎没有任何帮助。非常感谢任何帮助或建议。谢谢。

<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mls_title" class="MLS_Title">
    <asp:Label ID="lblTitle1" Text="Tasks" runat="server" class="MLS_titleLbl" /><br />
</div>
    <asp:UpdatePanel ID="pnlMap" runat="server">
        <ContentTemplate>
            <div>
                <asp:Button ID="btnMap" runat="server" Text="MAP" CausesValidation="false" CssClass="btnMap" />
                <ajax:ModalPopupExtender
                    ID="ModalPopupExtender1"
                    runat="server"
                    TargetControlID="btnMap"
                    PopupControlID="panel1"
                    PopupDragHandleControlID="PopupHeader"
                    Drag="true"
                    BackgroundCssClass="ModalPopupBG">
                </ajax:ModalPopupExtender>

                <asp:Panel ID="panel1" runat="server">
                    <div class="popup_large">
                        <asp:Label ID="Label7" Text="Floor Plan" runat="server" stle="float:left"></asp:Label>
                        <asp:ImageButton ID="ImageButton1" runat="server" ToolTip="No" ImageUrl="~/Images/no.png" Style="float: right; margin-right: 20px" />
                        <br />
                        <asp:ImageButton ID="img" runat="server" Height="30em" Width="45em" />
                    </div>
                </asp:Panel>

            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

Answer 1

这是一个示例链接，该示例添加到背景 onclick 以关闭模式:

http://forums.asp.net/t/1528820.aspx

将关键位复制到这里以供引用:

function pageLoad() { 
    var mpe = $find("MPE"); 
    mpe.add_shown(onShown); 
} 
function onShown() { 
    var background = $find("MPE")._backgroundElement; 
    background.onclick = function() { $find("MPE").hide(); } 
} 

<AjaxToolKit:ModalPopupExtender ID="mdlPopup" BehaviorID="MPE" runat="server"
    TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
    CancelControlID="btnClose" BackgroundCssClass="modalBackground" />