Bootstrap modal close modal onclick答案

【问题标题】：Bootstrap modal close modal onclickBootstrap modal close modal onclick
【发布时间】：2021-07-27 15:50:11
【问题描述】：

我有问题。

每次单击按钮关闭时，我都会在控制台中收到错误：Appointment:103 Uncaught ReferenceError: onCloseModal is not defined 在 HTMLButtonElement.onclick

我做错了什么？我尝试添加 Id="Closebtn" 并添加这样的脚本：

<script>
    $(document).ready(function(){
        // Open modal on page load
        $("#appointmentInput").modal('show');
 
        // Close modal on button click
        $("#Closebtn").click(function(){
            $("#appointmentInput").modal('hide');
        });
    });
</script>

尝试添加“;”在 onclick 方法之后。

模式代码：

<div class="modal fade" role="dialog" id="appointmentInput" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="appointmentForm" autocomplete="off" novalidate="novalidate">
                    <div class="modal-header">
                        <h4 class="modal-title">Add/Edit Appointment</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" maxlength="100" class="form-control" id="title" />
                        </div>
                        <div class="form-group">
                            <label for="description">Descriptions</label>
                            <textarea type="text" class="form-control" id="title"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="title">Select Patient</label>
                            <select id="patientId" asp-items="@(new SelectList(ViewBag.PatientList, "Id","Name"))" class="form-control"></select>
                        </div>
                        <div class="form-group">
                            <label for="title">Duration</label>
                            <select id="duration" asp-items="ViewBag.Duration" class="form-control"></select>
                        </div>
                        <input type="hidden" id="id" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="onCloseModal()">Close</button>
                        <button type="button" id="btnSubmit" class="btn btn-success" onclick="onSubmitForm();">Submit</button>
    
    
                    </div>
                </form>
            </div>
        </div>
    </div>`

还有JS代码：

    $(document).ready(function () {
        InitializeCalendar();
    });
    
    function InitializeCalendar() {
        try {
            $('#calendar').fullCalendar({
                timezone: false,
                header: {
                    left: 'prev,next,today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                selectable: true,
                editable: false,
                select: function (event) {
                    onShowModal(event, null);
                }
    
    
            });
        }
        catch (e) {
            alert(e);
        }
    }
    
    function onShowModal(obj, isEventDetail) {
        $("#appointmentInuput").modal("show");
    }
    
    function onCloseModal() {
    
        $("#appointmentInuput").modal("hide");
    }

【问题讨论】：

这不是 Bootstrap 模态的关闭方式。标记适当版本的 Bootstrap（根据 Bootstrap 标记中的说明）以获得更多帮助。大多数情况下，看看 API docs for modals。

标签： javascript asp.net-mvc twitter-bootstrap

【解决方案1】：

onShowModal 和 onCloseModal 的函数都引用 ID 为 #appointmentInuput 的元素，但您的模态使用 ID 为 #appointmentInput

纠正这个错字可以让模态按预期打开（和关闭）。我还要注意，Bootstrap 内置的 Modal 组件关闭操作也是功能齐全的：

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

data-dismiss="modal" 是触发模式关闭的属性。在 Bootstrap 5.x 中，这将是 data-bs-dismiss="modal"

【讨论】：