希望能够在在其外部单击时关闭模态弹出窗口答案

【问题标题】：Want to be able to close a Modal Popup when clicked outside of it希望能够在在其外部单击时关闭模态弹出窗口
【发布时间】：2013-02-01 16:08:08
【问题描述】：

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

我尝试了几件事和一个插件 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>

【问题讨论】：

模态对话框的背景是“ui-widget-overlay”类。您可能可以在其上添加一个单击事件，这可能会触发对话框关闭。

标签： c# jquery asp.net

【解决方案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" />

【讨论】：

【解决方案2】：

<AjaxToolKit:ModalPopupExtender .... BackgroundCssClass="jsMpeBackground" />

JavaScript（使用 jQuery）

jQuery('.jsMpeBackground').click(function () {
    var id = jQuery(this).attr('id').replace('_backgroundElement', '');
    $find(id).hide();
});

【讨论】：

【解决方案3】：

我必须这样做，这样我才能在不关闭它的情况下单击实际的弹出窗口，因为我有功能性用户控件，例如弹出窗口上的选项卡部分和文本框。

<script type="text/javascript">
    //Hide's Doc Center when clicking outside

    function pageLoad(sender, args) {
        if (!args.get_isPartialLoad()) {
            $addHandler($find("MPE")._backgroundElement, "click", closePopup);
        }
    }

    function closePopup(e) {
        $find("MPE").hide();
    }

    //End
</script>

现在只需确保您的实际 ModelPopupExtender 中的 BehaviorID 与上面的标签匹配。像这样：

<ajaxToolkit:ModalPopupExtender ID="Popup" runat="server" PopupControlID="Container" BehaviorID="MPE" TargetControlID="fakeTargetControl" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" />

基本上我认为这只是处理模式弹出窗口的 _backgroundElement 属性的“点击”事件，并在该事件上运行 closePopup() 函数。

【讨论】：

【解决方案4】：

编写一个动态创建的脚本，在我的示例中，该脚本是在加载模式弹出扩展程序时添加的。注意：为了将此事件处理程序绑定到 ModalPopupExtender.OnLoad 事件，您需要添加一个引用（在客户端代码中，您可以将 'OnLoad="mpeExample_Load"' 添加到您的 ModalPopupExtender 标记）。

protected void mpeExample_Load(object sender, EventArgs e)    { 
   ScriptManager.RegisterClientScriptBlock(this, this.GetType(), 

"hideModalPopupViaClient", String.Format(@"function hideModalPopupViaClient() {
{ 
   var modalPopupBehavior = $find('{0}');                
   if (modalPopupBehavior) modalPopupBehavior.hide();}}", 
   mpeExample.ClientID), true);  

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "pageLoad", String.Format(@"function pageLoad() {
{                
   var backgroundElement = $get('{0}_backgroundElement');                
   if (backgroundElement) $addHandler(backgroundElement, 'click', hideModalPopupViaClient);            
}}", 
mpeExample.ClientID), true);}

【讨论】：