如何使警告消息消失后，模态关闭jQuery

Question

我想在模态关闭后隐藏警报消息，以便用户在打开模态时不会再次看到警报消息。因此，我设法重置了表单，但警告消息仍然是问题。

这是我的HTML:

<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Location name</h4>
            </div>
            <div class="modal-body">
                <form id="locationForm">
                    <div class="form-group ">
                        <label class="control-label " for="locationName">
                            Name
                        </label>
                        <input class="form-control" id="locationName" name="name" type="text" autofocus/>
                    </div>
                    <div class="form-group">
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-primary" id="locationBtn" value="Add new location"/>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <div id="locationAlert" style='float: left; color: red'></div>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Role name</h4>
            </div>
            <div class="modal-body">
                <form id="roleForm">
                    <div class="form-group ">
                        <label class="control-label " for="roleName">
                            Name
                        </label>
                        <input class="form-control" id="roleName" name="name" type="text" autofocus/>
                    </div>
                    <div class="form-group">
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-primary" id="roleBtn" value="Add new role"/>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <div id="roleAlert" style='float: left; color: red'></div>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Department name</h4>
            </div>
            <div class="modal-body">
                <form id="departmentForm">
                    <div class="form-group ">
                        <label class="control-label " for="departmentName">
                            Name
                        </label>
                        <input class="form-control" id="departmentName" name="name" type="text" autofocus/>
                    </div>
                    <div class="form-group">
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-primary" id="departmentBtn" value="Add new department"/>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <div id="departmentAlert" style='float: left; color: red'></div>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

和js:

var locationModal = $('#locationModal');
var roleModal = $('#roleModal');
var departmentModal = $('#departmentModal');
var holidayModal = $('#officialHolidayModal');
$(document).ready(function () {
    $('#addLocation').click(function () {
        locationModal.modal('show');
    });
    $('#addDepartment').click(function () {
        departmentModal.modal('show');
    });
    $('#addRole').click(function () {
        roleModal.modal('show');
    })
    $('#addOfficialHoliday').click(function () {
        holidayModal.modal('show');
    })
    // fill location select with options
    $.ajax({
        method: "GET",
        url: "/api/locations"
    }).done(function (locations) {
        $.each(locations, function (i, location) {
            $('#locations').append($('<option>', {
                value: location.locationId,
                text : location.name
            }));
        });
    });
});
$('#locationBtn').click(function (e) {
    e.preventDefault();
    var location = JSON.stringify($('#locationForm').serializeObject());
    if ($("#locationName").val().length < 1) {
        $("#locationAlert").text("Please insert a location!");
    } else {
        $.ajax({
            url: "/api/locations",
            method: 'POST',
            data: location,
            contentType: "application/json",
            dataType: "html"
        }).success(function () {
            $('#successMessage').text("Location added successfully");
            locationModal.modal('hide');
        });
        $("#locationForm")[0].reset();
    }
});
$('#roleBtn').click(function (e) {
    e.preventDefault();
    var location = JSON.stringify($('#roleForm').serializeObject());
    if ($("#roleName").val().length < 1) {
        $("#roleAlert").text("Please insert a role!");
    } else {
        $.ajax({
            url: "/api/roles",
            method: 'POST',
            data: location,
            contentType: "application/json",
            dataType: "html"
        }).success(function () {
            $('#successMessage').text("Role added successfully");
            roleModal.modal('hide');
        });
        $("#roleForm")[0].reset();
    }
});
$('#departmentBtn').click(function (e) {
    e.preventDefault();
    var location = JSON.stringify($('#departmentForm').serializeObject());
    if ($("#departmentName").val().length < 1) {
        $("#departmentAlert").text("Please insert a department!");
    } else {
        $.ajax({
            url: "/api/departments",
            method: 'POST',
            data: location,
            contentType: "application/json",
            dataType: "html"
        }).success(function () {
            $('#successMessage').text("Department added successfully");
            departmentModal.modal('hide');
        });
        $("#departmentForm")[0].reset();
    }
});

说明#locationAlert、#roleAlert和#departmentAlert在模态闭合后应该消失。怎么做呢?

Answer 1

您可以使用model-close事件:

$('#locationModal').on('hidden.bs.modal', function () {
    //Code here
});