我正在尝试获取一个弹出窗口,该窗口应由jQuery函数控制,该函数将在单击按钮时显示/隐藏。我的按钮是一个 asp.net 控件,但是当单击按钮时,我不知道如何"调用"jQuery函数
我试图将一个函数名称添加到我的 asp.net 控件的 onClientClick 中,该名称至少应该只显示弹出的div,但这不起作用。我是使用 jQuery 的新手,我相信我已经正确设置了所有内容,但我并不积极。我也不确定我是否试图正确"调用"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> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose your favorite mobile brand? </b>
</td>
</tr>
<tr>
<td> </td>
<td> </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> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
所以回顾一下,当我的 asp.net 按钮被单击时,我在调用我的 jQuery 函数时遇到了问题。我认为该函数根本没有被调用,因为当我在函数上设置断点时,它在测试时永远不会跳转到它们。任何帮助将不胜感激
ASP.NET 按钮具有动态生成的 ID,具体取决于其父控件。因此,您的按钮 ID 未 #AddToCardBtn。检查生成的 HTML 是否相关。作为一种解决方法,您可以通过以下方式调用生成的 ID:<%=AddToCardBtn.ClientID%> 到 jquery 代码中,以获取生成的按钮客户端 ID。
例:
$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
这就是您的窗口未显示的原因。该函数未绑定到按钮。