模式弹出窗口内的按钮点击不起作用

Button click inside Modal pop is not working

本文关键字：按钮 不起作用 窗口 模式      更新时间：2023-09-26

我有一个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;
    });

您可以尝试此代码

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

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

首先，为按钮添加两个类：

            <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
});
相关文章：