希望能够关闭模式弹出窗口，当点击它之外

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

来源

2013-02-01 user1288906

模态对话框的背景有一类“ui-widget-overlay”。您可能可能会将点击事件添加到该事件，这可能会触发对话框关闭。 – Marc

C＃

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

的JavaScript（使用jQuery）

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

来源

2013-05-12 15:28:50

下面是，增加了背景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" />

来源

2013-02-01 16:51:46 Kelsey

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

来源

2013-07-17 12:35:26 tanvi

我不得不这样做，这种方式使我能够点击的实际弹出没有它关闭，因为我有功能性的用户控件，如爪部和文本框，在弹出。

<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的“click”事件，并就事件运行closePopup（）函数。

来源

2013-12-23 15:39:09

希望能够关闭模式弹出窗口，当点击它之外

回答

相关问题