希望能夠關閉模式彈出窗口，當點擊它之外

我有一個模式彈出式擴展器和更新面板內的面板。我確實有一個關閉按鈕，我使用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

希望能夠關閉模式彈出窗口，當點擊它之外

回答

相關問題