在 Modal pop 中单击按钮不起作用

Question

我有一个div，里面有一个FileUpload和Button Click。 div 是一个弹出部分。见 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" />

但是每当我打开弹出窗口并上传文件并单击提交按钮时。按钮不起作用。

请参阅 Javascript 以调用弹出窗口：

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

Answer 1

在这种情况下，我通常隐藏这些按钮并从 UIDialog 按钮调用它们：

首先添加两个 class 到你的按钮：

            <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" />

然后在您的 jquery 函数中：

$("#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
});

Answer 2

你可以试试这个代码

$(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);
            }
        }

在 Modal pop 中单击按钮不起作用

Button click inside Modal pop is not working

html

javascript

asp.net

jquery

modal-dialog