Мне нужно подтвердить удаление с помощью ботстрапа 3 модального окна (ДА/НЕТ). как это сделать?
Код HTML:
<form action ="<?php echo $URL .'/admin/privileges.php?action=editable' ?>" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button></td>
</form>
Вам нужен модальный HTML. Когда нажата кнопка "Удалить", появляется модальная. Также важно предотвратить щелчок этой кнопки от отправки формы. Когда нажимается подтверждение, оно отправляет форму.
$('button[name="remove_levels"]').on('click', function(e) {
var $form = $(this).closest('form');
e.preventDefault();
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function(e) {
$form.trigger('submit');
});
});<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<form action="#" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>Вы можете использовать Bootbox диалоговые окна
$(document).ready(function() {
$('#btnDelete').click(function() {
bootbox.confirm("Are you sure want to delete?", function(result) {
alert("Confirm result: " + result);
});
});
});
простой способ использования модалов - eModal!
Ex из github:
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
var options = {
message: "The famouse question?",
title: 'Header title',
size: 'sm',
callback: function(result) { result ? doActionTrue(result) : doActionFalse(); },
subtitle: 'smaller text header',
label: "True" // use the possitive lable as key
//...
};
eModal.confirm(options); <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.one('click', '#delete', function (e) {
//delete function
});
});
Для вашей кнопки:
<button class='btn btn-danger btn-xs launchConfirm' type="button" name="remove_levels"><span class="fa fa-times"></span> delete</button></td>
У меня такая же проблема только сегодня, это мое решение (я думаю, лучше и проще):
<!-- Modal dialog -->
<div class="modal fade" id="frmPrenotazione" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
И в моем .js:
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code to delete
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
Использование one вместо on предотвращает запуск функции удаления при следующем открытии диалога.
Я надеюсь, что это может быть полезно.
Следуйте полному примеру:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Confirm dialog example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
</body>
<script>
var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code to delete
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
</script>
</html>Создайте модальный диалог в HTML с id = "confirm" и используйте функцию showConfirmation.
Также помните, что вы должны отменить (modal.unbind()) кнопку отмены и успеха после скрытого модального диалога. Если вы этого не сделаете, вы получите двойное связывание. Например: если вы открываете диалог один раз и нажимаете "Отмена", а затем открываете диалог во второй раз и нажимаете "Ok", вы получите 2 исполнения обратного вызова успеха.
showConfirmation = function(title, message, success, cancel) {
title = title ? title : 'Are you sure?';
var modal = $("#confirmation");
modal.find(".modal-title").html(title).end()
.find(".modal-body").html(message).end()
.modal({ backdrop: 'static', keyboard: false })
.on('hidden.bs.modal', function () {
modal.unbind();
});
if (success) {
modal.one('click', '.modal-footer .btn-primary', success);
}
if (cancel) {
modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
}
};
// bind confirmation dialog on delete buttons
$(document).on("click", ".delete-event, .delete-all-event", function(event){
event.preventDefault();
var self = $(this);
var url = $(this).data('url');
var success = function(){
alert('window.location.href=url');
}
var cancel = function(){
alert('Cancel');
};
if (self.data('confirmation')) {
var title = self.data('confirmation-title') ? self.data('confirmation-title') : undefined;
var message = self.data('confirmation');
showConfirmation(title, message, success, cancel);
} else {
success();
}
});
Следующее решение лучше, чем bootbox.js, потому что
digimango.messagebox.js
const dialogTemplate = '\
<div class ="modal" id="digimango_messageBox" role="dialog">\
<div class ="modal-dialog">\
<div class ="modal-content">\
<div class ="modal-body">\
<p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\
<p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\
</div>\
<div class ="modal-footer">\
<button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\
<button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\
</div>\
</div>\
</div>\
</div>';
// See the comment inside function digimango_onOkClick(event) {
var digimango_numOfDialogsOpened = 0;
function messageBox(msg, significance, options, actionConfirmedCallback) {
if ($('#digimango_MessageBoxContainer').length == 0) {
var iDiv = document.createElement('div');
iDiv.id = 'digimango_MessageBoxContainer';
document.getElementsByTagName('body')[0].appendChild(iDiv);
$("#digimango_MessageBoxContainer").html(dialogTemplate);
}
var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText;
if (options == null) {
okButtonName = 'OK';
cancelButtonName = null;
showTextBox = null;
textBoxDefaultText = null;
} else {
okButtonName = options.okButtonName;
cancelButtonName = options.cancelButtonName;
showTextBox = options.showTextBox;
textBoxDefaultText = options.textBoxDefaultText;
}
if (showTextBox == true) {
if (textBoxDefaultText == null)
$('#digimango_messageBoxTextArea').val('');
else
$('#digimango_messageBoxTextArea').val(textBoxDefaultText);
$('#digimango_messageBoxTextArea').show();
}
else
$('#digimango_messageBoxTextArea').hide();
if (okButtonName != null)
$('#digimango_messageBoxOkButton').html(okButtonName);
else
$('#digimango_messageBoxOkButton').html('OK');
if (cancelButtonName == null)
$('#digimango_messageBoxCancelButton').hide();
else {
$('#digimango_messageBoxCancelButton').show();
$('#digimango_messageBoxCancelButton').html(cancelButtonName);
}
$('#digimango_messageBoxOkButton').unbind('click');
$('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick);
$('#digimango_messageBoxCancelButton').unbind('click');
$('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick);
var content = $("#digimango_messageBoxMessage");
if (significance == 'error')
content.attr('class', 'text-danger');
else if (significance == 'warning')
content.attr('class', 'text-warning');
else
content.attr('class', 'text-success');
content.html(msg);
if (digimango_numOfDialogsOpened == 0)
$("#digimango_messageBox").modal();
digimango_numOfDialogsOpened++;
}
function digimango_onOkClick(event) {
// JavaScript nature is unblocking. So the function call in the following line will not block,
// thus the last line of this function, which is to hide the dialog, is executed before user
// clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count
// how many dialogs is currently showing. If we know there is still a dialog being shown, we do
// not execute the last line in this function.
if (typeof (event.data.callback) != 'undefined')
event.data.callback($('#digimango_messageBoxTextArea').val());
digimango_numOfDialogsOpened--;
if (digimango_numOfDialogsOpened == 0)
$('#digimango_messageBox').modal('hide');
}
function digimango_onCancelClick() {
digimango_numOfDialogsOpened--;
if (digimango_numOfDialogsOpened == 0)
$('#digimango_messageBox').modal('hide');
}