从不同的按钮只打开一个模态

Question

我正在尝试从我创建的表格中获取报告。问题是我现在有 3 个不同的按钮来触发 3 个不同的模式。这种方法有效，但我认为没有必要单独创建它们。我只想要一个自动路由到相关 "Action" 的模式。我认为 jquery 可以解决，但我似乎无法理解。

触发模态框的按钮如下。

 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a data-toggle="modal" data-target="#GeneralModal" class="dropdown-item" href="#">General Report </a>             
                        <a data-toggle="modal" data-target="#VehicleModal" class="dropdown-item" href="#">Vehicle Report</a>
                        <a data-toggle="modal" data-target="#WarrantylModal" class="dropdown-item" href="#">Warranty Report</a>
                    </div>

我的模态框在下面。

<div class="modal fade" id="GeneralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportGeneral" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>

<div class="modal fade" id="WarrantyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportWarranty" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>

<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportVehicle" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>

唯一变化的部分是模态，

<form action="/Export/ExportGeneral" role="form" method="post">

根据触发的模式，它会路由到另一个动作，例如，

出口一般出口保修导出车辆

我想问的是，是否有什么东西可以帮助我点击不同的按钮，但只在一种模式下打开它们，即

<form action="/Export/ExportGeneral" role="form" method="post">

根据点击的按钮自动更改。（也许是按钮的 ID？）

感谢您的宝贵时间！

Answer 1

改变你的html喜欢

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a onclick="openModal('GeneralModal')" class="dropdown-item" href="#">General Report </a>             
       <a onclick="openModal('VehicleModal')" class="dropdown-item" href="#">Vehicle Report</a>
       <a onclick="openModal('WarrantylModal')" class="dropdown-item" href="#">Warranty Report</a>
</div>

并提供您的表单 ID，以便我们可以使用 javascript 更改其属性，例如

<form action="" id="modalForm" role="form" method="post">

然后在脚本中

function openModal(modalName){
    if(modalName == 'GeneralModal'){
        $("#modalForm").attr("action",'/Export/ExportGeneral');
        $("#modalId").modal('show');
    }
    else if(modalName == 'VehicleModal'){
        $("#modalForm").attr("action",'/Export/ExportVehicle');
        $("#modalId").modal('show');
    }
    else if(modalName == 'WarrantylModal'){
        $("#modalForm").attr("action",'/Export/ExportWarranty');
        $("#modalId").modal('show');
    }
}

我认为它可能会解决您的问题并优化您的代码。 :)

Answer 2

在你的锚标签中，你只需要用我的代码替换你的代码：

<a data-toggle="modal" data-target="#GeneralModal" id="general-export-button" data-url="/Export/ExportGeneral" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#GeneralModal" id="warranty-export-button" data-url="/Export/ExportWarranty" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#GeneralModal" id="vehicle-export-button" data-url="/Export/ExportVehicle" class="dropdown-item" href="#">Warranty Report</a>

现在在您页面的底部，添加此 jQuery 代码，一切都会正常进行。

<script>
$("#general-export-button, #warranty-export-button, #vehicle-export-button").click(function (e) {
    e.preventDefault();
    var form = $("#multpurpose-form");
    form.prop("action", $(this).data("url"));
});

现在我将解释我的代码中发生了什么。所有锚标签都链接到一个模式。链接模式中表单的操作方法正在根据 "anchor tag data-url" 到 jQuery 代码进行更改。

从不同的按钮只打开一个模态

Open only one modal from different buttons

javascript

jquery

modal-dialog

href