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

本文关键字：窗口 模态 外部 单击 希望 | 更新日期: 2023-09-27 17:57:06

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

我尝试了几件事和一个插件点击外面。似乎没有什么帮助。任何帮助或建议将不胜感激。谢谢。

<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>

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

下面是一个示例的链接，该示例添加到背景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" />

C#

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

JavaScript（使用 jQuery）

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

我必须这样做，以便能够单击实际弹出窗口而不会关闭它，因为我在弹出窗口中具有功能性用户控件，例如选项卡部分和文本框。

<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（） 函数。

编写一个动态创建的脚本，在我的示例中，该脚本是在加载模式弹出窗口扩展器时添加的。注意：为了将此事件处理程序绑定到 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);}
相关文章：