Button click inside Modal pop is not working

Question

I have a div, inside which I have a FileUpload and Button Click. The div is a pop up section. See the HTML

<div id="modal_dialog" style="display: none;">
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" CausesValidation="false" OnClick="btnUpload_Click" CssClass="btn btn-danger" />
                </div>
                <asp:Button ID="btnModalPopup" runat="server" CssClass="btn btn-danger" Text="Upload Excel" />

But whenever I open the popup and upload the file and click the submit button. The button does not works.

See the Javascript for calling the pop up:

$("[id*=mainContent_btnModalPopup]").live("click", function () {
        $("#modal_dialog").dialog({
            title: "Upload Sheet",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
        return false;
    });

Answer 1

You can try this code

$(function () {
        $("[id*=btnModalPopup]").live("click", function () {
            $("#modal_dialog").dialog({
                title: "Upload Sheet",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    },
                },
                open: function (type, data) { $(this).parent().appendTo("form"); },
                modal: true
            });
            return false;
        });
    })


<form id="form1" runat="server">
    <div id="div1" style="display: none">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Upload" CausesValidation="false" OnClick="btnUpload_Click" />
    </div>
    <asp:Button ID="Button2" runat="server" Text="Show Modal Popup" />

</form>

 protected void btnUpload_Click(object sender, EventArgs e)
        {
            if (FileUpload1.HasFile)
            {
                string fileName = FileUpload1.FileName;

                FileUpload1.SaveAs("~/Images/" + fileName);
            }
        }

Answer 2

In this case i usually make these buttons hidden and invoke them from the UIDialog buttons:

First of all add two class to your buttons:

            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload" CausesValidation="false" OnClick="btnUpload_Click" CssClass="btn btn-danger upLoadClass" />
        </div>
        <asp:Button ID="btnModalPopup" runat="server" CssClass="btn btn-danger upLoadExcelClass" Text="Upload Excel" />

then in your jquery function:

$("#modal_dialog").dialog({
    title: "Upload Sheet",
    buttons: {
        Upload: function () {
            $(this).find('.upLoadClass').click();
            $(this).dialog('close');
        },
        UploadExcel: function () {
            $(this).find('.upLoadExcelClass').click();
            $(this).dialog('close');
        },
        Close: function () {
            $(this).dialog('close');
        }
    },
    modal: true
});