javascript - example - Cómo abrir dos diálogos modales en Twitter Bootstrap al mismo tiempo
modal jquery (4)
He implementado bootstrap dialog en mi proyecto. Tengo algunas funciones de eliminación en ese cuadro de diálogo y el mensaje de confirmación de eliminación abre otro cuadro de diálogo de arranque. Pero cuando el segundo diálogo de confirmación está abierto, el primer diálogo no se desactiva y todos los eventos funcionan.
¿Hay alguna solución para deshabilitar el cuadro de diálogo original cuando se abre otro cuadro de diálogo?
Aquí está mi código:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
content: content,
buttons: [{
label: ''Save'',
cssClass: ''btn-primary'',
id: ''btnSave'',
onclick: function (dialog) {
}
},
{
label: ''Close'',
cssClass: ''btn'',
id: ''btnClose'',
onclick: function (dialog) {
if (callback != "") {
callback(true);
}
dialog.close();
}
}]
});
dlg.open();`
}
Captura de pantalla:
Cuando el cuadro de diálogo de confirmación de eliminación está abierto, quiero desactivar el primer cuadro de diálogo.
El problema:
Para comprender las complejidades de los diálogos modales en el desarrollo web, deberá comprender un poco más acerca de la propiedad z-index y los contextos de apilamiento .
En resumen, el diálogo funciona agregando dos componentes principales al DOM: un fondo que ocupa toda la pantalla y un div que comprende su diálogo. Cada uno de ellos se destaca del resto de la página porque se colocan en el nivel raíz del DOM y se les otorga un alto valor por su propiedad de z-index . ¿Qué tan alto? Bueno, intente agregar un modal en blanco a una página en blanco y verá los siguientes elementos DOM:
<div class="modal-backdrop fade in"></div> <!-- z-index: 1030; --> <div class="modal bootstrap-dialog"> <!-- z-index: 1040; --> <div class="modal-dialog"> <!-- z-index: 1050; -->
El modal-backdrop da la ilusión de un verdadero proceso modal porque representa sobre todo el resto del contenido, lo que evita que los clics se disparen en cualquier lugar debajo. La única razón por la que modal-dialog puede recibir clics es porque se apila sobre el fondo, proporcionando un índice z más alto.
¡Eso es! Esa es toda la bolsa de trucos. Entonces, cuando bootstrap advierte contra el uso de múltiples diálogos , lo están haciendo porque el apilamiento se vuelve complicado. Si agrega otro elemento, se procesa con el mismo z-index exacto, lo que significa que estará por encima del contenido de la página normal, pero en el mismo plano que el cuadro de diálogo original. Si no cubre completamente el original, entonces se podrá hacer clic en el original porque no hay ningún telón de fondo sobre él.
La solución:
Para resolver esto, debe encontrar su propia forma de deshabilitar los clics en los modos de fondo. Este problema parece haber sido ( parcialmente ) resuelto. Vea el siguiente ejemplo:
Demo en jsFiddle
Bootstrap Dialog lo hizo para que al desactivar un cuadro de diálogo simplemente se cierre el último cuadro de diálogo en el DOM y se marque el evento como se maneja para que no se dispare nada más. Si el segundo modal está arriba y lo desactivas, lo único que sucederá es que el segundo modal se cerrará.
Manejo más avanzado:
Si quieres que el segundo modal parezca que está sobre el primero, tendrás que hacerlo manualmente.
Cuando se crea el nuevo modal, viene con su propio modal-backdrop . Cuando se muestra el segundo modal, puede hacer que aparezca por encima del original incrementando su índice z en relación con el primer modal. En el evento onshown , solo tenemos que tomar el modal actual y se superpone y modifica el índice z utilizando el método .CSS . Queremos que esto aparezca por encima de cualquier modal existente, así que primero contaremos la cantidad de modales en el DOM ( $(''.bootstrap-dialog'').length ) y luego incrementaremos el índice z para que sea más alto que el siguiente más alto diálogo.
Llama así:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
message: content,
onshown: function(dialog) {
var tier = $(''.bootstrap-dialog'').length - 1;
dialog.$modal.prev(".modal-backdrop")
.css("z-index", 1030 + tier * 30);
dialog.$modal
.css("z-index", 1040 + tier * 30);
}
// More Settings
}).open();
}
Demo de trabajo en jsFiddle
Captura de pantalla:
Como prueba de concepto, aquí hay una demostración que le permite agregar continuamente diálogos sobre otros diálogos.
Los diálogos infinitos de violín
Precaución UX:
Si bien esto es técnicamente posible de lograr, los modales dentro de los modales pueden crear un UX confuso , por lo que la respuesta correcta si tiene el problema es tratar de evitarlo por completo tomando el flujo de trabajo original y promoviéndolo a un diseño de página completa con una URL. y estado.
Mi humilde solución: Genere una nueva identificación para cada nuevo modal. Entonces solo gestiona todo a través de una variable. Está funcionando para mis propósitos, por cierto.
var _MODAL_LAST;
$( document ).on( ''show.bs.modal'' , ''.modal'' , function(){
_MODAL_LAST = $(this);
});
$( document ).on( ''hide.bs.modal'' , ''.modal'' , function(){
if( _MODAL_LAST.attr(''id'') !== $(this).attr(''id'') ){
return false;
}else{
_MODAL_LAST = $(this).prevAll(''.modal:first'');
}
});
Primero agregue clase al modo primario, así que: <div class="modal-content kk"> simplemente uso:
$(''#myModal1'').on(''shown.bs.modal'', function () {
$(''.kk'').addClass(''magla'');
$(''#myModal'').modal(''hide'');
});
$(''#myModal1'').on(''hidden.bs.modal'', function () {
$(''.kk'').removeClass(''magla'');
$(''#myModal'').modal(''show'');
});
donde .magla css es:
.magla {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
Probar se ve bien para mí.
Solo oculta el modal real usando el método onclick
<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$(''#actual-modal-id'').modal(''hide'');">
Text Button
</button>