Question

我遇到了问题。

每次点击关闭按钮时，控制台都会出错：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");
    }

Answer 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"

Bootstrap 模态关闭模态 onclick

1 个答案: