使用asp.net和jquery显示没有页面加载的模态弹出窗口

时间:2016-05-06 06:22:24

标签: jquery asp.net

根据 Jitendra Tiwari 建议我已经更改了我的代码并且工作正常,它显示弹出窗口,但加载页面弹出窗口后将加载并行页面这里是我已更改的代码  <obout:GridTemplate runat="server" ID="duplicate"> <Template> <asp:ImageButton ID="lnkbtnDuplicate" runat="server" OnClick="lnkbtnDuplicate_Click" AlternateText="Duplicate" CssClass='<%#Container.DataItem["schedule1"]%>' OnClientClick="OpenPopup();"></asp:ImageButton> </Template> </obout:GridTemplate> 并在对话框中必须显示代码所在的消息  <div> <div id="popupdiv" title="Basic modal dialog" class="dialog"> Are you sure you want ready to duplicate? <div class="footer" style="padding: 8px;"> <asp:Button ID="Button2" runat="server" Text="Proceed" CssClass="yes" OnClick="btnOkay_Click" /> <asp:Button ID="Button3" runat="server" Text="Cancel" CssClass="no" OnClick="btnCancel1_Click" /> <asp:Button ID="btnOkay" runat="server" Text="Yes" CssClass="yes hide" /> <asp:Button ID="btnCancel1" runat="server" Text="Cancel" CssClass="no hide" /> </div> </div> </div> Jquery代码是

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

         $("#popupdiv").dialog({
             autoOpen: false,
                title: "Dualistic e-Filing",
                width: 430,
                height: 250,
                modal: true,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });              
     })
     function OpenPopup() {
         $("#popupdiv").dialog("open");
         return false;
     }
</script>

我的后端代码是

 protected void lnkbtnDuplicate_Click(object sender, ImageClickEventArgs e)
    {
        try
        {

            Hashtable selectedRec = (Hashtable)ogridForms.SelectedRecords[0];
            Session["formkey_temp"] = Convert.ToString(selectedRec["form_key"].ToString());
            Session["bussiness_temp"] = Convert.ToString(selectedRec["business_key"]);
            Session["filling_temp"] = Convert.ToString(selectedRec["filing_type"]).ToUpper();
        }
        catch { }
    }
    protected void btnOkay_Click(object sender, EventArgs e)
    {
        try
        {
            BAL_F2290 objFormKeys = new BAL_F2290();
            var s = objFormKeys.Duplicate(Session["formkey_temp"].ToString());
            Session["FORM_KEY"] = Convert.ToString(s);
            Session["BUSINESS_KEY"] = Convert.ToString(Session["bussiness_temp"]);
            Session["FILING_TYPE"] = Convert.ToString(Session["filling_temp"]).ToUpper();
            Response.Redirect("TaxPeriod.aspx?dup=1");
        }
        catch (Exception ex)
        {
            string a = ex.Message;
        }
    }
    protected void btnCancel1_Click(object sender, EventArgs e)
    {

        Session["formkey_temp"] = null;
        Session["bussiness_temp"] = null;
        Session["filling_temp"] = null;
    }

2 个答案:

答案 0 :(得分:1)

您应该尝试OnClientClick事件。

试试这个解决方案

<obout:GridTemplate runat="server" ID="duplicate">
    <Template>
        <asp:ImageButton ID="lnkbtnDuplicate" runat="server"
            OnClick="lnkbtnDuplicate_Click" AlternateText="Duplicate"
            CssClass='<%#Container.DataItem["schedule1"]%>' OnClientClick="return OpenPopup();">   
        </asp:ImageButton>
    </Template>
</obout:GridTemplate>

<强>的Javascript

<script type="text/javascript">
 // Create your dialog one time when page ready
 $(function () {         
        $("#popupdiv").dialog({
            autoOpen:false, 
            title: "jQuery Popup from Server Side",
            width: 430,
            height: 250,
            modal: true,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });                    
 });
 // Open using this function
 function OpenPopup() {
     $("#popupdiv").dialog("open");
     return false;
 }
</script>

在更新面板中插入网格模板

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" runat="server">
        <ContentTemplate>                    
            <obout:GridTemplate runat="server" ID="duplicate">
               <Template>
                  <asp:ImageButton ID="lnkbtnDuplicate" runat="server"
                    OnClick="lnkbtnDuplicate_Click" AlternateText="Duplicate"
                    CssClass='<%#Container.DataItem["schedule1"]%>'    OnClientClick="OpenPopup();">   
                  </asp:ImageButton>
              </Template>
           </obout:GridTemplate>
        </ContentTemplate>
 </asp:UpdatePanel>

答案 1 :(得分:0)

试试这个会起作用

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $("[id*=btnPopup]").live("click", function () {
    $("#dialog").dialog({
        title: "jQuery Dialog Popup",
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });
    return false;
});
</script>
 <div id="dialog" style="display: none">
This is a simple popup
</div>
<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />