Question

我正在尝试获取一个弹出窗口，该窗口应该由jQuery函数控制，该函数将在按钮单击时显示/隐藏。我的按钮是一个asp.net控件，但我无法弄清楚如何调用＆＃34;单击按钮时的jQuery函数

我试图在我的asp.net控件的onClientClick上添加一个函数名，至少应该只显示弹出式div，但这不起作用。我是新手使用jQuery，我相信我已经正确设置了一切，但我并不积极。我也不确定我是否正在努力打电话给＃34; jquery函数正确。

这是jQuery代码..

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">


    $(documnet).ready(function () {
        $("#AddToCartBtn").click(function (e) {
            ShowDialog(false);
            e.preventDefault();
        });

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

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

        $("#btnSubmit").click(function (e) {
            var brand = $("#brands input:radio:checked").val();
            $("#output").html("<b>Your favorite mobile brand: </b>" + brand);
            HideDialog();
            e.preventDefault();
        });

    });

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


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

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

Heres the css..

    .web_dialog_overlay
    {
    position: fixed;
    top: 0;


     right: 0;
       bottom: 0;
       left: 0;
       height: 100%;
       width: 100%;
       margin: 0;
       padding: 0;
       background: #000000;
       opacity: .15;
       filter: alpha(opacity=15);
       -moz-opacity: .15;
       z-index: 101;
       display: none;
    }
    .web_dialog
    {
       display: none;
       position: fixed;
       width: 380px;
       height: 200px;
       top: 50%;
       left: 50%;
       margin-left: -190px;
       margin-top: -100px;
       background-color: #ffffff;
       border: 2px solid #336699;
       padding: 0px;
       z-index: 102;
       font-family: Verdana;
       font-size: 10pt;
    }
    .web_dialog_title
    {
       border-bottom: solid 2px #336699;
       background-color: #336699;
       padding: 4px;
       color: White;
       font-weight:bold;
    }
    .web_dialog_title a
    {
       color: White;
       text-decoration: none;
    }
    .align_right
    {
       text-align: right;
    }

and lastly the asp button control and the <div>'s

    <asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
                                            ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"                                         
                                              />

    <div id="output"></div>

    <div id="overlay" runat="server" class="web_dialog_overlay"></div>

    <div id="dialog" class="web_dialog">


    <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
          <tr>
             <td class="web_dialog_title">Online Survey</td>
             <td class="web_dialog_title align_right">
                <a href="#" id="btnClose">Close</a>
             </td>
          </tr>
          <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
          </tr>
          <tr>
             <td colspan="2" style="padding-left: 15px;">
                <b>Choose your favorite mobile brand? </b>
             </td>
          </tr>
          <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
          </tr>
          <tr>
             <td colspan="2" style="padding-left: 15px;">
                <div id="brands">
                   <input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
                   <input id="brand2" name="brand" type="radio" value="Sony" /> Sony 
                   <input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
                </div>
             </td>
          </tr>
          <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
          </tr>
          <tr>
             <td colspan="2" style="text-align: center;">
                <input id="btnSubmit" type="button" value="Submit" />
             </td>
          </tr>
       </table>
    </div>

回顾一下，点击我的asp.net按钮时，我无法调用我的jQuery函数。我根本不认为函数会被调用，因为当我在函数中设置断点时，它在测试时永远不会跳转到它们。任何帮助将不胜感激

Answer 1

ASP.NET按钮具有动态生成的ID，具体取决于其父控件。所以你的按钮ID不是#AddToCardBtn。检查生成的HTML。作为解决方法，您可以通过以下方式调出生成的ID：＆lt;％= AddToCardBtn.ClientID％＆gt;在你的jquery代码中获取生成的按钮客户端ID。

示例：

$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
            ShowDialog(false);
            e.preventDefault();
        });

这就是为什么你的窗户没有显示的原因。该功能不会与您的按钮绑定。

按钮单击时JQuery控制Popup div

1 个答案: