Question

我有一个模态弹出扩展器和一个更新面板内的面板。我有一个关闭按钮，我与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>

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

Answer 2

C＃

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

JavaScript（使用jQuery）

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

Answer 3

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

Answer 4

我必须这样做才能在没有关闭的情况下点击实际的弹出窗口，因为我在弹出窗口中有标签部分和文本框等功能用户控件。

<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 attr事件，并在该事件上运行closePopup（）函数。

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

4 个答案: