JQuery弹出问题

时间:2010-02-28 05:46:47

标签: jquery

我在Asp.Net VS08 C#上工作。单击按钮想要显示弹出窗口。弹出窗口包含一个按钮,点击按钮执行服务器端事件但弹出窗口没有关闭,弹出窗口关闭只点击取消按钮。我的问题是 .i可以调用弹出窗口但点击按钮不执行服务器端事件。

Aspx代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Popup3.aspx.cs" Inherits="Jquery1._8Version.Popup3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
      <link type="text/css" href="css/ui-lightness/jquery-ui-1.8rc2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8rc2.custom.min.js"></script>

    <script type="text/javascript">
        function openModalDiv(divname) {

            $("#Popup").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 300,
                modal: true,
                buttons: {
                    Cancel: function() {
                        $(this).dialog("close");
                    }
                },
                close: function() {
                    allFields.val("").removeClass("ui-state-error");
                }
            });
            $("#Popup").dialog("open");
        }       
    </script>


</head>
<body>
     <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

    <div id="Popup" style="display: none;"   title="Basic dialog">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" />
    </div>

    </ContentTemplate>
    </asp:UpdatePanel>

     <input id="Button3" type="button" value="Open 1" onclick="javascript:openModalDiv('Popup');" />       
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>


    </form>
</body>
</html>

C#代码:

protected void Button2_Click(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        }

1 个答案:

答案 0 :(得分:1)

我认为这就是你所追求的:

<script type="text/javascript">
  $(function() {
      $("#Popup").dialog({
          bgiframe: true,
          autoOpen: false,
          height: 300,
          modal: true,
          buttons: {
              Cancel: function() {
                  $(this).dialog("close");
              }
          },
         close: function() {
              allFields.val("").removeClass("ui-state-error");
         }
      }).parent().appendTo($("form:first"));
      $("#Button3").click() {
        $("#Popup").dialog("open");
      });
    });
</script>

只需从按钮上删除onclick,就应该是这样:

<input id="Button3" type="button" value="Open 1" />

关键部分是:.parent().appendTo($("form:first"))。默认情况下,模态会添加到正文中,在表单之外。结果是按钮数据永远不会随提交一起发送,服务器也不知道按钮被点击了,或者做了什么。这告诉模式在表单末尾跳转。试试吧,应该解决你的问题。