用於顯示div無法正常工作的jQuery

我想要一個對話框div出現，並使頁面變灰。我不應該能夠點擊頁面上的任何其他內容。
以下是我正在使用的代碼。不知怎的，代碼無法正常工作。頁面只是點擊超鏈接刷新。
任何人都可以幫忙嗎？用於顯示div無法正常工作的jQuery

<script> 
    $(document).ready(function() { 

       $("#DownloadButton").click(function (e) { 
        ShowDialog(true); 
        e.preventDefault(); 
       }); 

       $("#btnClose").click(function (e) { 
        HideDialog(); 
        e.preventDefault(); 
       }); 

       $("#btnDownload").click(function (e) { 
        HideDialog(); 
        e.preventDefault(); 
       }); 

      }); 

      function ShowDialog(modal) { 
       $("#overlay").show(); 
       $("#dialog").fadeIn(310); 

       if (modal) { 
        $("#overlay").unbind("click"); 
       } 
       else { 
        $("#overlay").click(function (e) { 
         HideDialog(); 
        }); 
       } 
      } 

      function HideDialog() { 
       $("#overlay").hide(); 
       $("#dialog").fadeOut(300); 
      } 

</script> 




<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
     <div id="overlay" class="web_dialog_overlay"> 
     </div> 
     <div id="dialog" class="web_dialog"> 
      <table> 
       <tr> 
        <td> 
         <asp:Button ID="btnDownload" runat="server" Text="Download" /> 
        </td> 
        <td> 
         <asp:Button ID="btnClose" runat="server" Text="Close" /> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <Triggers> 
       <asp:PostBackTrigger ControlID="DownloadButton" /> 
      </Triggers> 
      <ContentTemplate> 
       <div class="BaseClass"> 
        <asp:LinkButton ID="DownloadButton" runat="server">Download</asp:LinkButton> 
       </div> 
       <asp:GridView> 
       </asp:GridView> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </asp:Content>

來源

2012-06-15 RMN

preventDefault（）顯示在任何行之前先出現，至少會停止刷新頁面。 – Chibuzo

preventDefault應該是確保默認行爲不被觸發的第一行 – Muleskinner

什麼不起作用？給你一些步驟的細節，你做什麼，什麼是不工作，你期望做什麼... – Aristos

如果DownloadButton，btnClose & btnDownload是服務器控件的標識，併爲獲得客戶ID，你必須使用：的

$("#<%=DownloadButton.ClientID%>")

代替

$("#DownloadButton")

在你的jQuery代碼。

或者

如果您正在使用ASP.Net 4.0

使用的ClientIDMode = 「靜」與你的服務器端控件。

用於關閉對話框：

使用鏈接關閉模型彈出： EG。

<a href="#" id="btnClose"></a>

和你的Javascript使用：

$("#btnClose").click(function (e) { 
        HideDialog(); 
       });

來源

2012-06-15 11:38:02

+1這是正確的，但此代碼有更多的錯誤。 – Aristos

Kapil，這個問題解決了，但點擊關閉按鈕後，我的頁面再次刷新。任何方式來阻止該回傳？ – RMN

關閉對話框，使用鏈接關閉對話框。看到我更新的答案。 –

你爲什麼不使用簡單的錨標記？至少不會導致回發，不需要使用更新面板。

<a id="DownloadButton" href="#">Download</a> 

$("#DownloadButton").click(function (e) { 
       ShowDialog(true); 
       e.preventDefault(); 
      });

否則如果您想使用服務器端控件，Kapil Khandelwal的答案是正確的。

$("#<%=DownloadButton.ClientID%>")

來源

2012-06-15 11:50:20

我認爲使用asp。在updatepanel內部的網絡控制來更新它在代碼後面的鏈接。 – Aristos

在文件準備：

 jQuery("#overlay").dialog(
      { 
       bgiframe: true, 
       autoOpen: false, 
       modal: true, 
       width: 800 
      } 
     );

click事件

：

 $('#overlay').dialog('open');

你必須指定在該對話框的聲明更多的選擇，我敢肯定，但是這方法對我來說工作得很好。

來源

2012-06-15 12:43:52 KennyZ

用於顯示div無法正常工作的jQuery

回答

相關問題