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-->

现在我有下面的链接打开弹出窗口没问题：

<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>

但是我希望能够在点击上面的按钮时运行一些代码，我尝试使用LinkButton然而我无法显示弹出窗口。我想运行一些代码的原因是我需要知道页面上的哪个按钮请求弹出窗口。

我希望这是有道理的。

任何帮助表示感谢。

谢谢，史蒂夫

Answer 1

我认为你可以通过两种方式解决它。

使用jQuery处理点击事件。
在控件上使用OnClientClick事件。
在链接按钮上使用data-rel属性。

选项1：

设置ClientIDMode =“Static”，在我看来最简单，或者在javascript中使用control.ClientID（如下所示）。这可以确保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>

注意：

在上面提到的代码中，代码在运行插件时自动初始化（jQuery Mobile）。由于您想从链接按钮调用它，您需要将data-rel属性添加到链接按钮，或者您需要手动调用对话框，就像我在上面的选项1和2中所做的那样。请参阅jQuery Mobile {{3有关更详细的解释。

来自文档：

调用弹出插件此插件将在任何页面上自动初始化   包含具有属性data-role =“popup”的div。但是，如果   只需要你可以直接在任何选择器上调用弹出插件   像任何jQuery插件一样，并以编程方式使用弹出窗口   选项，方法和事件API：

$（“＃myPopupDiv”）。popup（）;

你需要测试代码，以确保我得到了正确的div id，因为我没有机会。

希望这有帮助。

瓦德

Answer 2

感谢所有人的帮助，我在Wade73的帮助下解决了这些问题。

我已将下面的代码添加到asp.net链接按钮的click事件中。

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

这会导致弹出窗口在我的事件被触发后显示。

再次感谢。

LinkButton的JQuery Popup

2 个答案:

LinkBut​​ton的JQuery Popup

2 个答案:

LinkButton的JQuery Popup