jquery - tutorial - ¿Confirmar eliminación en modal/dialog usando Twitter Bootstrap?
como usar bootstrap (12)
GET receta
Para esta tarea, puede usar los complementos ya disponibles y las extensiones de arranque. O puede hacer su propia ventana emergente de confirmación con solo 3 líneas de código. Echale un vistazo.
Digamos que tenemos estos enlaces (note data-href lugar de href ) o botones para los que deseamos tener una confirmación de eliminación para:
<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a>
<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">
Delete record #54
</button>
Aquí #confirm-delete apunta a un div emergente modal en su HTML. Debe tener un botón "Aceptar" configurado de esta manera:
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
</div>
Ahora solo necesitas este pequeño javascript para 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''));
});
Por lo tanto, en show.bs.modal , el botón de eliminación de eventos href se establece en URL con el ID de registro correspondiente.
Demostración: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview
Receta POST
Me doy cuenta de que en algunos casos puede ser necesario realizar una solicitud POST o DELETE en lugar de GET. Sigue siendo bastante sencillo 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;
}
<script data-require="jquery@*" data-semver="2.0.3" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>
<a href="#" data-record-id="23" data-record-title="The first one" data-toggle="modal" data-target="#confirm-delete">
Delete "The first one", #23
</a>
<br />
<button class="btn btn-default" data-record-id="54" data-record-title="Something cool" data-toggle="modal" data-target="#confirm-delete">
Delete "Something cool", #54
</button>
Demostración: http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview
Bootstrap 2.3
Aquí hay una versión original del código que hice cuando estaba respondiendo 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(/(&|/?)ref=/d*/, ''$1ref='' + id));
});
Demostración : http://jsfiddle.net/MjmVr/1595/
Tengo una tabla HTML de filas vinculadas a las filas de la base de datos. Me gustaría tener un enlace de "eliminar fila" para cada fila, pero me gustaría confirmar con el usuario de antemano.
¿Hay alguna manera de hacer esto usando el diálogo modal de Twitter Bootstrap?
POST Receta con navegación a la página de destino y archivo Blade reutilizable
La respuesta de dfsq es muy agradable. Lo modifiqué un poco para adaptarlo a mis necesidades: en realidad necesitaba un modal para el caso de que, después de hacer clic, el usuario también se desplazara a la página correspondiente. Ejecutar la consulta de forma asíncrona no siempre es lo que se necesita.
Usando Blade creé los resources/views/includes/confirmation_modal.blade.php archivo resources/views/includes/confirmation_modal.blade.php :
<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>{{ $headerText }}</h4>
</div>
<div class="modal-body">
{{ $bodyText }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<form action="" method="POST" style="display:inline">
{{ method_field($verb) }}
{{ csrf_field() }}
<input type="submit" class="btn btn-danger btn-ok" value="{{ $confirmButtonText }}" />
</form>
</div>
</div>
</div>
</div>
<script>
$(''#confirmation-modal'').on(''show.bs.modal'', function(e) {
href = $(e.relatedTarget).data(''href'');
// change href of button to corresponding target
$(this).find(''form'').attr(''action'', href);
});
</script>
Ahora, usarlo es sencillo:
<a data-href="{{ route(''data.destroy'', [''id'' => $data->id]) }}" data-toggle="modal" data-target="#confirmation-modal" class="btn btn-sm btn-danger">Remove</a>
No ha cambiado mucho aquí y el modal puede incluirse así:
@include(''includes.confirmation_modal'', [''headerText'' => ''Delete Data?'', ''bodyText'' => ''Do you really want to delete these data? This operation is irreversible.'',
''confirmButtonText'' => ''Remove Data'', ''verb'' => ''DELETE''])
Solo poniendo el verbo ahí, lo usa. De esta manera, CSRF también se utiliza.
Me ayudó, tal vez ayuda a alguien más.
Cuando se trata de un proyecto grande y relevante, es posible que necesitemos algo reutilizable . Esto es algo que vine con la ayuda de SO.
confirmDelete.jsp
<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body" style="height: 75px">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm-delete-ok">Ok
</button>
</div>
</div>
</div>
<script type="text/javascript">
var url_for_deletion = "#";
var success_redirect = window.location.href;
$(''#confirmDelete'').on(''show.bs.modal'', function (e) {
var message = $(e.relatedTarget).attr(''data-message'');
$(this).find(''.modal-body p'').text(message);
var title = $(e.relatedTarget).attr(''data-title'');
$(this).find(''.modal-title'').text(title);
if (typeof $(e.relatedTarget).attr(''data-url'') != ''undefined'') {
url_for_deletion = $(e.relatedTarget).attr(''data-url'');
}
if (typeof $(e.relatedTarget).attr(''data-success-url'') != ''undefined'') {
success_redirect = $(e.relatedTarget).attr(''data-success-url'');
}
});
<!-- Form confirm (yes/ok) handler, submits form -->
$(''#confirmDelete'').find(''.modal-footer #confirm-delete-ok'').on(''click'', function () {
$.ajax({
method: "delete",
url: url_for_deletion,
}).success(function (data) {
window.location.href = success_redirect;
}).fail(function (error) {
console.log(error);
});
$(''#confirmDelete'').modal(''hide'');
return false;
});
<script/>
reutilizando page.jsp
<a href="#" class="table-link danger"
data-toggle="modal"
data-target="#confirmDelete"
data-title="Delete Something"
data-message="Are you sure you want to inactivate this something?"
data-url="client/32"
id="delete-client-32">
</a>
<!-- jQuery should come before this -->
<%@ include file="../some/path/confirmDelete.jsp" %>
Nota: Esto utiliza el método de eliminación de http para la solicitud de eliminación, puede cambiarlo desde javascript o puede enviarlo usando un atributo de datos como en data-title o data-url, etc., para respaldar cualquier solicitud.
Encontré esto útil y fácil de usar, y además se ve bonito: http://maxailloud.github.io/confirm-bootstrap/ .
Para usarlo, incluye el archivo .js en tu página y luego ejecuta:
$(''your-link-selector'').confirmModal();
Existen varias opciones que puede aplicar para que se vea mejor cuando lo haga para confirmar una eliminación, yo uso:
$(''your-link-selector'').confirmModal({
confirmTitle: ''Please confirm'',
confirmMessage: ''Are you sure you want to delete this?'',
confirmStyle: ''danger'',
confirmOk: ''<i class="icon-trash icon-white"></i> Delete'',
confirmCallback: function (target) {
//perform the deletion here, or leave this option
//out to just follow link..
}
});
Gracias a la solution @ Jousby, logré que la mía también funcionara, pero descubrí que tenía que mejorar un poco el marcado modal de Bootstrap de su solución para que se renderizara correctamente, como se demuestra en los examples oficiales.
Entonces, aquí está mi versión modificada de la función de confirm genérica que funcionó bien:
/* Generic Confirm func */
function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {
var confirmModal =
$(''<div class="modal fade">'' +
''<div class="modal-dialog">'' +
''<div class="modal-content">'' +
''<div class="modal-header">'' +
''<a class="close" data-dismiss="modal" >×</a>'' +
''<h3>'' + heading +''</h3>'' +
''</div>'' +
''<div class="modal-body">'' +
''<p>'' + question + ''</p>'' +
''</div>'' +
''<div class="modal-footer">'' +
''<a href="#!" class="btn" data-dismiss="modal">'' +
cancelButtonTxt +
''</a>'' +
''<a href="#!" id="okButton" class="btn btn-primary">'' +
okButtonTxt +
''</a>'' +
''</div>'' +
''</div>'' +
''</div>'' +
''</div>'');
confirmModal.find(''#okButton'').click(function(event) {
callback();
confirmModal.modal(''hide'');
});
confirmModal.modal(''show'');
};
/* END Generic Confirm func */
Me di cuenta de que es una pregunta muy antigua, pero desde hoy me pregunté por un método más eficiente para manejar los modales de arranque. Investigué un poco y encontré algo mejor que las soluciones que se muestran arriba, que se pueden encontrar en este enlace:
http://www.petefreitag.com/item/809.cfm
Primero carga el jQuery
$(document).ready(function() {
$(''a[data-confirm]'').click(function(ev) {
var href = $(this).attr(''href'');
if (!$(''#dataConfirmModal'').length) {
$(''body'').append(''<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>'');
}
$(''#dataConfirmModal'').find(''.modal-body'').text($(this).attr(''data-confirm''));
$(''#dataConfirmOK'').attr(''href'', href);
$(''#dataConfirmModal'').modal({show:true});
return false;
});
});
Luego simplemente haga cualquier pregunta / confirmación a href:
<a href="/any/url/delete.php?ref=ID" data-confirm="Are you sure you want to delete?">Delete</a>
De esta manera, el modo de confirmación es mucho más universal y puede reutilizarse fácilmente en otras partes de su sitio web.
Puedes probar más reutilizable mi solución con función de devolución de llamada . En esta función puede utilizar la solicitud POST o alguna lógica. Bibliotecas utilizadas: JQuery 3> y Bootstrap 3> .
https://jsfiddle.net/axnikitenko/gazbyv8v/
Código HTML para la prueba:
...
<body>
<a href=''#'' id="remove-btn-a-id" class="btn btn-default">Test Remove Action</a>
</body>
...
Javascript:
$(function () {
function remove() {
alert(''Remove Action Start!'');
}
// Example of initializing component data
this.cmpModalRemove = new ModalConfirmationComponent(''remove-data'', remove,
''remove-btn-a-id'', {
txtModalHeader: ''Header Text For Remove'', txtModalBody: ''Body For Text Remove'',
txtBtnConfirm: ''Confirm'', txtBtnCancel: ''Cancel''
});
this.cmpModalRemove.initialize();
});
//----------------------------------------------------------------------------------------------------------------------
// COMPONENT SCRIPT
//----------------------------------------------------------------------------------------------------------------------
/**
* Script processing data for confirmation dialog.
* Used libraries: JQuery 3> and Bootstrap 3>.
*
* @param name unique component name at page scope
* @param callback function which processing confirm click
* @param actionBtnId button for open modal dialog
* @param text localization data, structure:
* > txtModalHeader - text at header of modal dialog
* > txtModalBody - text at body of modal dialog
* > txtBtnConfirm - text at button for confirm action
* > txtBtnCancel - text at button for cancel action
*
* @constructor
* @author Aleksey Nikitenko
*/
function ModalConfirmationComponent(name, callback, actionBtnId, text) {
this.name = name;
this.callback = callback;
// Text data
this.txtModalHeader = text.txtModalHeader;
this.txtModalBody = text.txtModalBody;
this.txtBtnConfirm = text.txtBtnConfirm;
this.txtBtnCancel = text.txtBtnCancel;
// Elements
this.elmActionBtn = $(''#'' + actionBtnId);
this.elmModalDiv = undefined;
this.elmConfirmBtn = undefined;
}
/**
* Initialize needed data for current component object.
* Generate html code and assign actions for needed UI
* elements.
*/
ModalConfirmationComponent.prototype.initialize = function () {
// Generate modal html and assign with action button
$(''body'').append(this.getHtmlModal());
this.elmActionBtn.attr(''data-toggle'', ''modal'');
this.elmActionBtn.attr(''data-target'', ''#''+this.getModalDivId());
// Initialize needed elements
this.elmModalDiv = $(''#''+this.getModalDivId());
this.elmConfirmBtn = $(''#''+this.getConfirmBtnId());
// Assign click function for confirm button
var object = this;
this.elmConfirmBtn.click(function() {
object.elmModalDiv.modal(''toggle''); // hide modal
object.callback(); // run callback function
});
};
//----------------------------------------------------------------------------------------------------------------------
// HTML GENERATORS
//----------------------------------------------------------------------------------------------------------------------
/**
* Methods needed for get html code of modal div.
*
* @returns {string} html code
*/
ModalConfirmationComponent.prototype.getHtmlModal = function () {
var result = ''<div class="modal fade" id="'' + this.getModalDivId() + ''"'';
result +='' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'';
result += ''<div class="modal-dialog"><div class="modal-content"><div class="modal-header">'';
result += this.txtModalHeader + ''</div><div class="modal-body">'' + this.txtModalBody + ''</div>'';
result += ''<div class="modal-footer">'';
result += ''<button type="button" class="btn btn-default" data-dismiss="modal">'';
result += this.txtBtnCancel + ''</button>'';
result += ''<button id="''+this.getConfirmBtnId()+''" type="button" class="btn btn-danger">'';
result += this.txtBtnConfirm + ''</button>'';
return result+''</div></div></div></div>'';
};
//----------------------------------------------------------------------------------------------------------------------
// UTILITY
//----------------------------------------------------------------------------------------------------------------------
/**
* Get id element with name prefix for this component.
*
* @returns {string} element id
*/
ModalConfirmationComponent.prototype.getModalDivId = function () {
return this.name + ''-modal-id'';
};
/**
* Get id element with name prefix for this component.
*
* @returns {string} element id
*/
ModalConfirmationComponent.prototype.getConfirmBtnId = function () {
return this.name + ''-confirm-btn-id'';
};
Puedo manejar fácilmente este tipo de tareas usando la biblioteca bootbox.js. Al principio es necesario incluir el archivo JS bootbox. Luego, en su función de controlador de eventos, simplemente escriba el siguiente código:
bootbox.confirm("Are you sure to want to delete , function(result) {
//here result will be true
// delete process code goes here
});
http://bootboxjs.com/ oficial de bootboxjs
Si desea hacerlo con el método abreviado más sencillo, u puede hacerlo con http://bootboxjs.com/ .
Pero este complemento es una implementación alternativa que utiliza Bootstrap Modal . Y la implementación real de Bootstrap también es muy fácil, por lo que no me gusta usar este complemento porque agrega contenido de JS en exceso en la página, lo que ralentizará el tiempo de carga de la página.
Idea
Me gusta implementarlo por mi mismo de esta manera-
- Si el usuario hace clic en un botón para eliminar un elemento de la lista, entonces una llamada de JS colocará la ID del elemento (o cualquier otra información esencial) en un formulario en el modal.
Luego, en la ventana emergente, habrá 2 botones para confirmación.
- Sí enviará el formulario (con ajax o formulario directo enviar)
- No solo va a descartar el modal
El código será así (usando Bootstrap ) -
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
//Say - $(''p'').get(0).id - this delete item id
$("#delete_item_id").val( $(''p'').get(0).id );
$(''#delete_confirmation_modal'').modal(''show'');
});
});
</script>
<p id="1">This is a item to delete.</p>
<button type="button" class="btn btn-danger">Delete</button>
<!-- Delete Modal content-->
<div class="modal fade" id="delete_confirmation_modal" role="dialog" style="display: none;">
<div class="modal-dialog" style="margin-top: 260.5px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do you really want to delete this Category?</h4>
</div>
<form role="form" method="post" action="category_delete" id="delete_data">
<input type="hidden" id="delete_item_id" name="id" value="12">
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Yes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
</div>
</form>
</div>
</div>
</div>
Debe cambiar la acción de formulario de acuerdo a su requerimiento.
Happy coading :)
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 las etiquetas y especificar valores predeterminados, pero generalmente se les llama así:
bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
Aquí hay un fragmento de él en acción (haga clic en "Ejecutar fragmento de código" a continuación):
$(function() {
bootbox.alert("Hello world!");
});
<!-- required includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- bootbox.js at 4.4.0 -->
<script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>
La siguiente solución es mejor que bootbox.js , porque
- Puede hacer todo lo que bootbox.js puede hacer;
- La sintaxis de uso es más sencilla.
- Le permite controlar elegantemente el color de su mensaje usando "error", "advertencia" o "información"
- Bootbox tiene 986 líneas de largo, la mía solo 110 líneas de largo
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''s 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'');
}
Para utilizar digimango.messagebox.js :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A useful generic message box</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="~/Scripts/bootbox.js" type="text/javascript"></script>
<script src="~/Scripts/digimango.messagebox.js" type="text/javascript"></script>
<script type="text/javascript">
function testAlert() {
messageBox(''Something went wrong!'', ''error'');
}
function testAlertWithCallback() {
messageBox(''Something went wrong!'', ''error'', null, function () {
messageBox(''OK clicked.'');
});
}
function testConfirm() {
messageBox(''Do you want to proceed?'', ''warning'', { okButtonName: ''Yes'', cancelButtonName: ''No'' }, function () {
messageBox(''Are you sure you want to proceed?'', ''warning'', { okButtonName: ''Yes'', cancelButtonName: ''No'' });
});
}
function testPrompt() {
messageBox(''How do you feel now?'', ''normal'', { showTextBox: true }, function (userInput) {
messageBox(''User entered "'' + userInput + ''".'');
});
}
function testPromptWithDefault() {
messageBox(''How do you feel now?'', ''normal'', { showTextBox: true, textBoxDefaultText: ''I am good!'' }, function (userInput) {
messageBox(''User entered "'' + userInput + ''".'');
});
}
</script>
</head>
<body>
<a href="#" onclick="testAlert();">Test alert</a> <br/>
<a href="#" onclick="testAlertWithCallback();">Test alert with callback</a> <br />
<a href="#" onclick="testConfirm();">Test confirm</a> <br/>
<a href="#" onclick="testPrompt();">Test prompt</a><br />
<a href="#" onclick="testPromptWithDefault();">Test prompt with default text</a> <br />
</body>
</html>
// ---------------------------------------------------------- Generic Confirm
function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {
var confirmModal =
$(''<div class="modal hide fade">'' +
''<div class="modal-header">'' +
''<a class="close" data-dismiss="modal" >×</a>'' +
''<h3>'' + heading +''</h3>'' +
''</div>'' +
''<div class="modal-body">'' +
''<p>'' + question + ''</p>'' +
''</div>'' +
''<div class="modal-footer">'' +
''<a href="#" class="btn" data-dismiss="modal">'' +
cancelButtonTxt +
''</a>'' +
''<a href="#" id="okButton" class="btn btn-primary">'' +
okButtonTxt +
''</a>'' +
''</div>'' +
''</div>'');
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);
});