來自LinkBut​​ton的JQuery Popup

Question

我有下面的代碼，它使用JQuery框架和ASP.NET（VB）。

基本上下面的代碼片段是在ASP頁上，直到您單擊超鏈接/按鈕，然後在彈出窗口被遮住了，下面是隱藏彈出代碼，這是我知道的作品：

<!--HIDDEN POPUP 1 BEGIN--> 
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog1-screen"> </div> 
<div class="ui-popup-container pop ui-popup-hidden" id="popupDialog1-popup"><div data-role="popup" id="popupDialog1" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true"> 
     <div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner"> 
      <h1 class="ui-title" role="heading" aria-level="1">Export Data</h1> 
     </div> 
     <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main"> 
      <h3 class="ui-title">Export Data</h3> 
      <asp:HiddenField ID="hidDataName" runat="server" /> 
      <p>Choose one of the formats below to export the data to.</p> 
       <div data-role="controlgroup" data-type="horizontal"> 
        <asp:LinkButton ID="btnExcel" runat="server" data-role="button"><asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" />Excel</asp:LinkButton> 
        <asp:LinkButton ID="btnPDF" runat="server" data-role="button"><asp:Image ID="imgPDF" runat="server" ImageUrl="~/images/PDF.ico" Width="50px" Height="50px" />PDF</asp:LinkButton> 
        <asp:LinkButton ID="btnWord" runat="server" data-role="button"><asp:Image ID="imgWord" runat="server" ImageUrl="~/images/Word.ico" Width="50px" Height="50px" />Word</asp:LinkButton> 
        <asp:LinkButton ID="btnCSV" runat="server" data-role="button"><asp:Image ID="imgCSV" runat="server" ImageUrl="~/images/CSV.ico" Width="50px" Height="50px" />CSV</asp:LinkButton> 
       </div>  
     </div> 
</div></div> 
<!--HIDDEN POPUP 1 END--> 

現在我有下面這將打開沒有問題的彈出罰款鏈接：使用一個LinkBut​​ton但是我

<a href="#popupDialog1" data-rel="popup" data-position-to="window" data-role="button" data-inline="false" data-transition="pop" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" aria-haspopup="true" data-theme="j" aria-owns="#popupDialog1" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-hover-j ui-btn-up-j"> 
<span class="ui-btn-inner"><span class="ui-btn-text">Approve All</span></span></a> 

但是我希望能夠運行在上面按一下按鈕一些代碼，我已盡力無法顯示彈出窗口。我想運行一些代碼的原因是我需要知道頁面上的哪個按鈕請求彈出窗口。

我希望這是有道理的。

任何幫助表示讚賞。

謝謝你，史蒂夫

Answer 1

我認爲你可以解決它的兩種方法之一。

1. 使用jQuery處理單擊事件。
2. 在控件上使用OnClientClick事件。
3. 在鏈接按鈕上使用data-rel屬性。

選項1：

設置的ClientIDMode = 「靜態」，最容易在我的意見，或使用control.ClientID在JavaScript（如下所示）。這確保jQuery代碼將在您想要的控件上執行。編碼jQuery並運行你的代碼。

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

     $("#btnExcel").click(function() { 
      $("#popupDialog1-screen").popup(); 
     } 

    }); 
</script> 

或

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

     $("#<%= btnExcel.ClientID %>").click(function() { 
      $("#popupDialog1-screen").popup(); 
     } 

    }); 
</script> 

選項2：

<asp:LinkButton ID="btnExcel" runat="server" OnClientClick="ExcelClick();" 
data-role="button"><asp:Image ID="imgExcel" runat="server" 
ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" /> 
Excel</asp:LinkButton> 

...

<script> 
    function ExcelClick() { 
     $("#popupDialog1-screen").popup(); 
    } 
</script> 

選項3：

<asp:LinkButton ID="btnExcel" runat="server" data-rel="popup"> 
    <asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico" 
     Width="50px" Height="50px" />Excel 
</asp:LinkButton> 

注：

在你把上面的代碼的代碼運行插件時autoinitialized（jQuery Mobile的）。既然你想從鏈接按鈕調用它，你需要將data-rel屬性添加到鏈接按鈕，或者你需要手動調用對話框，就像我上面在選項1和2中所做的那樣。請參考jQuery Mobile documentation更詳細的解釋。

從文檔：

調用彈出插件這個插件將autoinitialize任何頁面 包含與屬性數據，作用一個div =「彈出」上。但是，如果需要 您可以直接調用彈出插件上的任何選擇，只是 就像任何jQuery插件，並在彈出的編程工作 選項，方法和事件API：

$（「#myPopupDiv」）.popup （）;

您將需要測試代碼以確保我得到正確的div ID，因爲我沒有機會。

希望這會有所幫助。

Wade

Answer 2

大家非常感謝您的幫助，我已經用Wade73的幫助解決了這個問題。

我已將下面的代碼添加到asp.net鏈接按鈕的單擊事件。

Page.ClientScript.RegisterStartupScript(Me.GetType(), "MyScript", "$(function() {$('#popupDialog1').popup('open');});", True) 

這會導致彈出窗口在我的事件觸發後顯示。

再次感謝。