Javascript 如何在modal关闭jQuery后使警报消息消失？_Javascript_Jquery_Html_Twitter Bootstrap

Javascript 如何在modal关闭jQuery后使警报消息消失？

javascript jquery html twitter-bootstrap

Javascript 如何在modal关闭jQuery后使警报消息消失？,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我想在模式关闭后隐藏警报消息，以便用户在打开模式时不再看到警报消息。因此，我设法重新设置了表单，但警报消息仍然存在问题这是我的HTML： <div id="locationModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content">

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

这是我的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();
    }
});

var locationModal=$（“#locationModal”）；
变量roleModal=$（“#roleModal”）；
var departmentmodel=$（“#departmentmodel”）；
var holidaymodel=$（“#officialholidaymodel”）；
$（文档）.ready（函数（）{
$（“#添加位置”）。单击（函数（）{
locationModal.modal（'show'）；
});
$（“#添加部门”）。单击（功能（）{
departmentModal.modal（“show”）；
});
$（“#添加角色”）。单击（函数（）{
roleModal.modal（'show'）；
})
$（'addOfficialHoliday'）。单击（函数（）{
holidayModal.modal（“show”）；
})
//使用选项选择填充位置
$.ajax({
方法：“获取”，
url:“/api/位置”
}).完成（功能（位置）{
$。每个（位置、功能（i、位置）{
$（'#位置'）。追加（$（''）{
值：location.locationId，
text:location.name
}));
});
});
});
$（“#locationBtn”）。单击（函数（e）{
e、 预防默认值（）；
var location=JSON.stringify（$（'#locationForm'）.serializeObject（）；
if（$（“#locationName”）.val（）.length<1）{
$（“#locationAlert”）.text（“请插入位置！”）；
}否则{
$.ajax({
url:“/api/locations”，
方法：“POST”，
数据：位置，
contentType:“应用程序/json”，
数据类型：“html”
}).success（函数（）{
$（“#成功消息”）.text（“成功添加位置”）；
locationModal.modal（'hide'）；
});
$（“#locationForm”）[0]。重置（）；
}
});
$（'#roleBtn'）。单击（函数（e）{
e、 预防默认值（）；
var location=JSON.stringify（$（'#roleForm'）.serializeObject（）；
if（$（“#roleName”）.val（）.length<1）{
$（“#roleAlert”）.text（“请插入角色！”）；
}否则{
$.ajax({
url:“/api/roles”，
方法：“POST”，
数据：位置，
contentType:“应用程序/json”，
数据类型：“html”
}).success（函数（）{
$（“#成功消息”）.text（“成功添加角色”）；
roleModal.modal（'hide'）；
});
$（“#角色表单”）[0]。重置（）；
}
});
$（“#部门BTN”）。单击（功能（e）{
e、 预防默认值（）；
var location=JSON.stringify（$（'#departmentForm'）.serializeObject（）；
if（$（“#部门名称”）.val（）.length<1）{
$（“#部门警报”）.text（“请插入部门！”）；
}否则{
$.ajax({
url:“/api/部门”，
方法：“POST”，
数据：位置，
contentType:“应用程序/json”，
数据类型：“html”
}).success（函数（）{
$（'successMessage'）.text（“部门添加成功”）；
departmentModal.modal（'hide'）；
});
$（“#部门表单”）[0]。重置（）；
}
});

因此，模式关闭后，

#位置警报

、

#角色警报

和

#部门警报

应消失。如何执行此操作？

您可以使用模型关闭事件：

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