Aprenderemos a Abrir modal dentro de otro modal en Bootstrap 5. En Bootstrap 5, abrir un modal dentro de otro puede causar problemas debido a la gestión del z-index y el backdrop (fondo opaco). Para solucionarlo, puedes hacer lo siguiente:
Solución: Manejar la apertura/cierre manualmente
- Usar
data-bs-backdrop="static"para evitar que el modal principal se cierre al hacer clic fuera. - Cerrar el primer modal antes de abrir el segundo usando JavaScript.
- Reabrir el primer modal cuando se cierre el segundo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal dentro de otro Modal - Baulphp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Botón para abrir el primer modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">
Abrir Modal 1
</button>
<!-- Modal 1 -->
<div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal1Label">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
Contenido del primer modal.
<br>
<button type="button" class="btn btn-success" id="openModal2">
Abrir Modal 2
</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal2Label">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
Contenido del segundo modal.
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const modal1 = new bootstrap.Modal(document.getElementById('modal1'));
const modal2 = new bootstrap.Modal(document.getElementById('modal2'));
document.getElementById("openModal2").addEventListener("click", function() {
modal1.hide(); // Oculta el primer modal
setTimeout(() => modal2.show(), 500); // Abre el segundo modal con un pequeño retraso
});
document.getElementById("modal2").addEventListener("hidden.bs.modal", function() {
modal1.show(); // Vuelve a abrir el primer modal al cerrar el segundo
});
});
</script>
</body>
</html>Explicación del código anterior:
data-bs-backdrop="static": Evita que el modal se cierre al hacer clic fuera.modal1.hide()antes de abrirmodal2.show(): Se cierra el primer modal antes de abrir el segundo.- Cuando se cierra
modal2, se vuelve a abrirmodal1.
Resultado: Se abre el Modal 1, desde ahí puedes abrir el Modal 2 sin problemas. Al cerrar el Modal 2, el Modal 1 reaparece.
Espero que este ejemplo les ayude en sus proyectos!!
