模态显示和隐藏

Question

我正在尝试 show/hide 视图中的模态，它在我的脚本部分中具有淡入淡出 class 但未显示。请问，我做错了什么？代码附在下面。

观点：

<div class="modal modal-top fade" id="showModal">
            <div class="modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title"><span class="font-weight-bold">Add City of choice</span></h4>
                        <button id="btn" type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>
                    </div>

                    <div class="modal-body">
                        <div class="form-row">
                            <div class="form-group col">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" placeholder="Enter City" required name="name" value="" />
                            </div>
                            <div class="form-group col">
                                <label class="form-label">Rate</label>
                                <input type="number" class="form-control" placeholder="Enter Rate" required name="rate" value="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Min Order</label>
                            <input type="number" class="form-control" placeholder="Enter Min Order" name="minOrder" value="" />
                        </div>
                        <div class="form-group mt-3">
                            <label class="switcher">
                                <input type="checkbox" class="switcher-input" name="allowFree" value="" />
                                <span class="switcher-indicator">
                                    <span class="switcher-yes"></span>
                                    <span class="switcher-no"></span>
                                </span>
                                <span class="switcher-label">Free Delivery</span>
                            </label>
                        </div>
                        <button id="hideModal" type="submit" class="btn btn-primary button button4">Submit</button>
                    </div>
            </div>
        </div>
        <div class="modal-footer">
            <button id="btnClose" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
        </div>

脚本：

<script type="text/javascript">
            $(document).ready(function () {
                $("body").on("change", "#ddlStates", function () {
                    $("#hfStateName").val($(this).find("option:selected").text());
                });

                $("#submitBtn").click(function () {

                    var value = $("#selectedState").val();
                    $('#ListSubmit').append(value);

                });
            

                // Displaying the City details modal
                $("#submitBtn").click(function () {
                    $("#showModal").modal("show");

                // Close modal on button click
                    $("#hideModal").click(function () {
                    $("#showModal").modal("hide");
                });
        });

        </script>

Answer 1

});需要在你的第二个submitBtn点击功能的最后，但是你最好只为一个按钮创建一个点击功能：

$(document).ready(function () {
                $("body").on("change", "#ddlStates", function () {
                    $("#hfStateName").val($(this).find("option:selected").text());
                });

                $("#submitBtn").click(function () {

                    var value = $("#selectedState").val();
                    $('#ListSubmit').append(value);
                    $("#showModal").modal("show");
                });
            
                // Close modal on button click
                    $("#hideModal").click(function () {
                    $("#showModal").modal("hide");
                });
        });

结果：

模态显示和隐藏

Modal show and hide

javascript

asp.net-core

view

bootstrap-modal

script