javascript - 使用jquery隐藏模态框

Question

这是我的 jquery 代码，我必须使用 jquery 隐藏模态，我尝试使用“隐藏”，但它不起作用!

  $(document).ready(function () {

    $('#modalButtonLogin').click(function (e) {
        e.preventDefault();
        $('#loginModal').modal()

    });
    $('#reserveButtonModal').click(function (e) {
        e.preventDefault();
        $('#modelId').modal()
    });

    $('#dismiss').click(function () {
        $('#modelId').modal('hide');
    });
   });

我使用相同的 ID，但我不知道该怎么做，ID 被“解雇” 我有一个问题，因为使用 data-dismiss 它可以工作，但我需要知道它在 jquery 中是如何工作的

    <!-- Modal Task's -->
    <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reserve Table</h5>
                    <button type="button" class="close" aria-label="Close" id="dismiss">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
      

                    <div class="row p-2">
                        <div class="col-sm col-lg-2">
                            <h5>Section</h5>
                        </div>
                        <div class="btn-group align-self-center" data-toggle="buttons">
                            <a href="" class="btn btn-success">Non-Smoking</a>
                            <a href="" class="btn btn-danger">Smoking</a>
                        </div>
                    </div>

                    <div class=" row p-2">
                        <div class="col-sm col-lg-2">
                            <h5 class="">Date and Time </h5>
                        </div>
                        <div class="mr-3 pb-2 ">
                            <input type="date" name="dateinfo" id="" placeholder="Date">
                        </div>
                        <div class="mr-3 pl-4">
                            <input type="time" name="" id="" placeholder="Time">
                        </div>
                    </div>
                    <div class=" row offset-lg-2 offset-1">
                        <button type="submit" class="btn btn-primary"> Reserve </button>
                        <button type="button" class="btn btn-secondary ml-2" id="dismiss">Close</button>                    
                    </div>
                </div>
            </div>
        </div>

Answer 1

您可以尝试将 $('#modelId').modal('hide'); 替换为 $('#modalId').modal('toggle');