Nuestro equipo de expertos pasados muchos días de trabajo y de recopilar de datos, obtuvimos la solución, queremos que resulte útil para ti en tu trabajo.
Solución:
OBTENER receta
Para esta tarea, puede utilizar complementos y extensiones de arranque ya disponibles. O puede crear su propia ventana emergente de confirmación con solo 3 líneas de código. Echale un vistazo.
Digamos que tenemos estos enlaces (nota data-href en lugar de href) o botones para los que queremos tener confirmación de eliminación:
Delete record #23
Aquí #confirm-delete apunta a un div emergente modal en su HTML. Debería tener un botón “Aceptar” configurado así:
Ahora solo necesita este pequeño javascript para hacer que una acción de eliminación sea confirmable:
$('#confirm-delete').on('show.bs.modal', function(e)
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
);
Pronto show.bs.modal botón de eliminación de eventos href se establece en la URL con el id. de registro correspondiente.
Manifestación: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview
POST receta
Me doy cuenta de que en algunos casos puede ser necesario realizar una solicitud POST o DELETE en lugar de GET. Todavía es bastante simple sin demasiado código. Eche un vistazo a la demostración a continuación con este enfoque:
// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e)
var $modalDiv = $(e.delegateTarget);
var id = $(this).data('recordId');
$modalDiv.addClass('loading');
$.post('/api/record/' + id).then(function()
$modalDiv.modal('hide').removeClass('loading');
);
);
// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e)
var data = $(e.relatedTarget).data();
$('.title', this).text(data.recordTitle);
$('.btn-ok', this).data('recordId', data.recordId);
);
// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e)
var $modalDiv = $(e.delegateTarget);
var id = $(this).data('recordId');
$modalDiv.addClass('loading');
setTimeout(function()
$modalDiv.modal('hide').removeClass('loading');
, 1000);
// In reality would be something like this
// $modalDiv.addClass('loading');
// $.post('/api/record/' + id).then(function()
// $modalDiv.modal('hide').removeClass('loading');
// );
);
// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e)
var data = $(e.relatedTarget).data();
$('.title', this).text(data.recordTitle);
$('.btn-ok', this).data('recordId', data.recordId);
);.modal.loading .modal-content:before
content: 'Loading...';
text-align: center;
line-height: 155px;
font-size: 20px;
background: rgba(0, 0, 0, .8);
position: absolute;
top: 55px;
bottom: 0;
left: 0;
right: 0;
color: #EEE;
z-index: 1000;
[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
Delete "The first one", #23
Manifestación: http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview
Bootstrap 2.3
Aquí hay una versión original del código que hice cuando respondía esta pregunta para Bootstrap 2.3 modal.
$('#modal').on('show', function()
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
removeBtn.attr('href', removeBtn.attr('href').replace(/(&);
Manifestación: http://jsfiddle.net/MjmVr/1595/
http://bootboxjs.com/ – últimos trabajos con Bootstrap 3.0.0
El ejemplo más simple posible:
bootbox.alert("Hello world!");
Desde el sitio:
La biblioteca expone tres métodos diseñados para imitar sus equivalentes nativos de JavaScript. Las firmas de sus métodos exactos son flexibles ya que cada uno puede tomar varios parámetros para personalizar etiquetas y especificar valores predeterminados, pero comúnmente se denominan así:
bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
Aquí hay un fragmento en acción (haga clic en “Ejecutar fragmento de código” a continuación):
$(function()
bootbox.alert("Hello world!");
);
// ---------------------------------------------------------- Generic Confirm
function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback)
var confirmModal =
$('');
confirmModal.find('#okButton').click(function(event)
callback();
confirmModal.modal('hide');
);
confirmModal.modal('show');
;
// ---------------------------------------------------------- Confirm Put To Use
$("i#deleteTransaction").live("click", function(event)
// get txn id from current table row
var id = $(this).data('id');
var heading = 'Confirm Transaction Delete';
var question = 'Please confirm that you wish to delete transaction ' + id + '.';
var cancelButtonTxt = 'Cancel';
var okButtonTxt = 'Confirm';
var callback = function()
alert('delete confirmed ' + id);
;
confirm(heading, question, cancelButtonTxt, okButtonTxt, callback);
);
Nos puedes proteger nuestra investigación mostrando un comentario o dejando una valoración te lo agradecemos.