2

Estoy desarrollando una página en jsp y mysql , la cual se compone de 3 frames uno para la barra superior, otro para la barra central y otro para un mena a la izquierda. En la barra superior hay un link, para desconectarse de la aplicación, que abre un modal con un formulario que envía la petición al servidor para desconectarse. El problema es que esta ventana modal se muestra detrás del frame central.

aquí la imagen.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Aquí el código del modal.

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Log out</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form action="logoutServlet.do">
<div class="modal-body">
<p class="lorem">Estas seguro que deseas salir?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary" formtarget="_top">Salir</button>
 </div>
</form>
</div>
</div>

Este modal se crea en la página "frame superior" osea en la barra superior y lo llamó desde el botón "Salir", pero en vez de mostrarse afuera de todos los frames, se muestra detrás. Si alguien me pudiese ayudar seria genial, gracias.

probé usando style:"z-index: 999;" en el div del modal pero solo me oscurece la pagina de la barra superior y el modal sigue visualizandose detras del frame central.

aqui la primera linea del modal con el style z-index 999

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" style="z-index: 999;">

introducir la descripción de la imagen aquí

9
  • puedes darle estilo con z-index desde css al div que contiene todo el modal y asignarle un número que supere a todos los demás elementos (que este por encima de todo): z-index: 999; Commented el 14 nov. 2018 a las 0:05
  • Efectivamente, lo puedes solucionar con z-index
    – Pelukosa
    Commented el 14 nov. 2018 a las 12:53
  • acabo de probar con z-index: 999; y no me funcionó dejare una imagen de como se ve usando style="z-index: 999;" en el div del modal Commented el 15 nov. 2018 a las 16:27
  • Por desgracia el contenido de un marco no puede "escapar" de su zona delimitada por <frameset>/<frame>, por lo que un modal quedará en su interior y cualquier intento de salir de él será recortado. Es decir, no es que tu ventana modal haya quedado tras el marco principal, si no que ésta no puede escapar de los límites de su marco. ¿Te importa si para mostrar ese mensaje modal desaparece el marco principal? Commented el 15 nov. 2018 a las 16:54
  • y que se podría hacer en este caso? Commented el 15 nov. 2018 a las 16:56

1 respuesta 1

2

El principal problema que estás sufriendo es que cada marco tiene asignada un área de la ventana del navegador de la que no puede salir, es imposible escapar de ella ni aún modificando parámetros como z-index.

Para poder solucionar esta limitación, podemos aumentar el área de visualización desde el marco hijo, accediendo al marco padre mediante window.parent:

console.log('Marco padre:', parent);

Para empezar facilitaremos la localización del juego de marcos en el HTML del padre para facilitar el código:

<frameset id="marcos" rows="100,*">
  <frame src="superior.html">
  <frame src="inferior.html">
</frameset>

En el ejemplo la parte superior tendrá una altura de 100 pixeles y la parte inferior será del resto de la ventana (100,*).

Ahora, para poder mostrar el mensaje modal a pantalla completa jugaremos con los eventos del modal:

show.bs.modal

Este evento se dispara inmediatamente en cuanto se llama al método de instancia para mostrar. Si fue causado por un clic, el elemento que fue pulsado estará disponible en la propiedad relatedTarget del evento.

hidden.bs.modal

Este evento será disparado cuando el modal finalice su efecto de ocultación al usuario (esperará a que se complete la transición CSS).

De modo que localizaremos el juego de marcos del padre para cambiar la definición del atributo rows por uno en el que el marco inferior sólo ocupe 1 pixel y el superior el resto de la ventana (*,1) y restablecemos el original cuando se oculte:

/* Aumentamos el marco superior cuando se muestre el modal */
$('#exampleModalCenter').on('show.bs.modal', function (e) {
  parent.document.getElementById('marcos').rows = '*,1';
})
/* Restablecemos el tamaño original cuando se oculte */
$('#exampleModalCenter').on('hidden.bs.modal', function (e) {
  parent.document.getElementById('marcos').rows = '100,*';
})

Tienes un ejemplo online disponible aquí.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.