twitter-bootstrap 根据模态确认对话框选择关闭 Bootstrap Alert
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24001106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close Bootstrap Alert based on modal confirm dialog choice
提问by Ronald McDonald
The button below that has the data-dismiss="alert" attribute displays a Bootstrap 2 modal dialog so the user can confirm whether or not to close the alert.
下面具有 data-dismiss="alert" 属性的按钮显示 Bootstrap 2 模式对话框，以便用户可以确认是否关闭警报。
Right now the Bootstrap "alert" (which is a div on the UI, not a popup) closes before the user even selects anything in the modal confirm popup.
现在，引导程序“警报”（它是 UI 上的一个 div，而不是弹出窗口）在用户甚至在模态确认弹出窗口中选择任何内容之前关闭。
How can I get the Bootstrap "alert" (div) to close or stay open based on what the user chooses in the modal popup dialog?
如何根据用户在模态弹出对话框中的选择让 Bootstrap“警报”（div）关闭或保持打开状态？
<div class="span8 see-all-notifications">
<div id="notification-list" class="module main-slot-c">
@foreach (var notification in Model.Notifications)
{
<div class="noti-alert">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert"
data-notificationid="@notification.NotificationId"
data-contactpointid="@notification.ContactPointId"
data-apiurl="@Url.Content("~/api/account/")">
x
</button>
<h5>
<i class="icon-file @notification.EventCategoryIdentifier"></i> @notification.Description <span>Reported at @notification.RaisedDate</span>
</h5>
<div class="noti-collapse">
<div class="noti-collapse-inner">
@notification.Body
</div>
</div>
</div>
</div>
}
</div>
</div>
<div id="deleteNotificationConfirmModal" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Confirm Deletion of Notification</h3>
</div>
<div class="modal-body">
<h4>Are you sure you want to delete the notification?</h4>
</div>
<div class="modal-footer">
<a id="notificationDeleteConfirm" href="#" class="btn btn-success">Delete Notification</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
Here's the relevent part of the javascript file
这是javascript文件的相关部分
// This function wires up the code to "close" the notification (set status to "Read")
$('.noti-alert').each(function(){
$(this).bind('close', function () {
var notificationId = $(this).find('button').data('notificationid');
var contactpointId = $(this).find('button').data('contactpointid');
var url = $(this).find('button').data('apiurl');
$("#deleteNotificationConfirmModal").modal('show');
$('#notificationDeleteConfirm').on('click', function () {
//"Delete" the notification --> CloseNotification method in api controller
$.ajax({
type: "POST",
url: url,
data:{
notificationid: notificationId,
contactpointid: contactpointId
},
success: function (data) { },
error: function (err) {
alert("error" + err.status + " " + err.statusText);
}
});
$('#deleteNotificationConfirmModal').modal('hide');
});
});
});
});
});
EDIT: Here's the final code I got to work. I needed to call e.preventDefaultand then close the "alert" by calling the thisAlert.remove();method in the ajax success callback
编辑：这是我开始工作的最终代码。我需要e.preventDefault通过调用thisAlert.remove();ajax 成功回调中的方法来调用然后关闭“警报”
// This function wires up the code to "close" the notification (set status to "Read")
$('.noti-alert').each(function(){
$(this).bind('close.bs.alert', function (e) {
e.preventDefault();
var notificationId = $(this).find('button').data('notificationid');
var contactpointId = $(this).find('button').data('contactpointid');
var url = $(this).find('button').data('apiurl');
$("#deleteNotificationConfirmModal").modal('show');
// set a reference to the notification so we can remove it in the ajax call below
var thisAlert = $(this);
$('#notificationDeleteConfirm').on('click', function () {
//"Delete" the notification --> CloseNotification method in api controller
$.ajax({
type: "POST",
url: url,
data:{
notificationid: notificationId,
contactpointid: contactpointId
},
success: function (data) {
$('#deleteNotificationConfirmModal').modal('hide');
thisAlert.remove();
},
error: function (err) {
alert("error" + err.status + " " + err.statusText);
}
});
});
// bind modal's close button click event
$('.notificationDeleteCancel').on('click', function () {
// close modal
//alert('cancel');
$("#deleteNotificationConfirmModal").modal('hide');
});
});
});
});
采纳答案by blurfus
You should call $('#deleteNotificationConfirmModal').modal('hide');on your successfunction of the AJAX call.
你应该叫$('#deleteNotificationConfirmModal').modal('hide');上你的successAJAX调用的函数。
This is because you are using an ajax call (which is asynchronous)
这是因为您正在使用 ajax 调用（这是异步的）
For example:
例如：
success: function (data) {
$('#deleteNotificationConfirmModal').modal('hide');
},
UPDATED code below:See fiddle
下面的更新代码：见小提琴
// This function wires up the code to "close" the notification (set status to "Read")
$('.alert-info').each(function () {
// show confirmation dialog when closing alert message
$(this).bind('close.bs.alert', function (e) {
e.preventDefault();
$("#myModal").modal('show');
});
});
// bind modal's close button click event
$('.notificationDeleteCancel').on('click', function () {
// close modal
alert('cancel');
});
// bind modal's delete notification button click event
$('.notificationDeleteConfirm').on('click', function () {
// do ajax
alert('delete');
//"Delete" the notification --> CloseNotification method in api controller
$.ajax({
type: "POST",
url: "/echo/json/",
data: 'mydata',
cache: false,
success: function(json){
$("#myModal").modal('hide');
$('.alert-info').alert('close');
},
error: function (err) {
alert( 'error');
}
});
});
