如何關閉阿賈克斯模式彈出與外部點擊

我正在寫一個網頁在C＃asp.net。該頁面正在使用母版頁。我在頁面中有一個ajax模式彈出窗口。我想添加2個功能對於這個彈出：如何關閉阿賈克斯模式彈出與外部點擊

關閉彈出窗口時，模態彈出
以外用戶點擊觸發模式彈出後，服務器端的代碼是封閉的。

有計算器上類似的問題，但幾乎所有的人都與jQuery的模態彈出窗口。

這裏是我的代碼：

<asp:Button ID="Button1" runat="server" Style="display: none" /> 
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="btnOkay" 
     TargetControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader" 
     Drag="true" BackgroundCssClass="ModalPopupBG"> 
    </asp:ModalPopupExtender> 
    <asp:Panel ID="Panel1" runat="server" CssClass="PopupCss"> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <ContentTemplate> 
       <table style="width: 100%; height: 825px;"> 
        <tr> 
         <td> 
          <div id="mediaplayer"> 
           JW Player goes here</div> 
          <script type="text/javascript"> 
           jwplayer("mediaplayer").setup({ 
            flashplayer: "jwplayer/player.swf", 
            file: "<%=videoName %>", 
            image: "<%=videoThumb %>", 
            width: "100%", 
            height: "100%" 
           }); 
          </script> 
         </td> 
         <td valign="top" align="left" style="text-align: left;"> 
          <div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="true"> 
          </div> 
          <br /> 
          <div class="fb-comments" data-href="<%=videoLink%>" data-num-posts="3" data-width="470"> 
          </div> 
          <br /> 
          <br /> 
          <br /> 
          <!-- AddThis Button BEGIN --> 
          <div class="addthis_toolbox addthis_default_style "> 
           <a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"> 
           </a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"> 
           </a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"> 
           </a> 
          </div> 
          <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f61d99d08697325"></script> 
          <!-- AddThis Button END --> 
          <br /> 
          <br /> 
          <asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled" 
           AutoPostBack="false" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty" 
           WaitingStarCssClass="ratingStarEmpty"> 
           <asp:HiddenField ID="HiddenField1" runat="server" Value='<%=videoId%>' /> 
          </asp:Rating> 
          &nbsp (<%=voteCount%>) 
          <br /> 
          Minder Score: 
          <%=minderScore %> 
          <br /> 
          <div class="Controls" style="text-align: left;"> 
           <input id="btnOkay" type="button" value="Kapat" /> 
          </div> 
         </td> 
        </tr> 
       </table> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </asp:Panel>

，並在後面的代碼我顯示出與該行彈出：

ModalPopupExtender1.Show();

任何幫助，將不勝感激。謝謝先進。

來源

2012-06-14 Ozgur Dogus

你可以顯示你用來創建彈出窗口的代碼 – Jupaol

@Jupaol我添加了代碼。該面板有一個社交插件視頻，一個評級控制和Facebook評論插件。謝謝。 –

隱藏/使用JavaScript顯示modalpopuextender，請嘗試：

function hidemodal() { 
$find('ModalPopupExtender1').hide(); 
} 

function showmodal() { 
$find('ModalPopupExtender1').show(); 
}

可以提高該hidemodal（）方法click事件或其他。

您也可以使用PageMethods到觸發服務器端的功能從JavaScript調用服務器端腳本里面添加hidemodal（）方法的代碼。淨查找有關asp.net PageMethods

function hidemodal() { 
$find('ModalPopupExtender1').hide(); 
PageMethods.AnyServerFunction(param, onsuccess_callback); 
} 

function onsuccess_callback() { 
}

問候，

來源

2012-06-14 08:36:01

嗨，我怎樣才能綁定外部的模態到隱形功能和我在哪裏調用該功能？謝謝。 –

我認爲很難在模態之外單擊，因爲modalpopup的性質阻止了父模型在模態關閉之前被訪問。我可以想到的一種方式是使用javascript：function hidemodal（）{ var keycode = window.event.keyCode;}在body/form keydown事件中捕獲ESC鍵，即（keycode == 27）{ $ find（「ModalPopupExtender1」）。hide（）; } } –

您可以綁定在身上的click事件，並設置e.stopPropagation();點擊裏面，在那之後你可以檢查是否點擊的元素是彈出元素，如果是的話，什麼也不做，如果不是，關閉彈出窗口

來源

2012-06-14 09:37:38 udidu

如何關閉阿賈克斯模式彈出與外部點擊

回答

相關問題