Problems to open boostrap modal window in Frames page

Question

Problems to open boostrap modal window in Frames page

Navigation

#1 by (1 votes)

1

I am developing a page in jsp and mysql, which consists of 3 frames one for the upper bar, one for the central bar and one for a ore on the left. In the upper bar there is a link, to disconnect from the application, which opens a modal with a form that sends the request to the server to disconnect. The problem is that this modal window is displayed behind the central frame.

here the image.

Here the modal code.

<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>

This modal is created in the "upper frame" page in the upper bar and called it from the "Exit" button, but instead of being displayed outside of all the frames, it is shown behind. If someone could help me, it would be great, thank you.

I tried using style: "z-index: 999;" in the div of the modal but only the page in the top bar obscures me and the modal is still displayed behind the central frame.

here the first line of the modal with style z-index 999

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

html bootstrap

asked by Simón Pereira Vigouroux 13.11.2018 в 23:33

source

1 answer

Login on Android How to add elements dynamically to a form c # from a class

score 1 · Accepted Answer

The main problem that you are suffering is that each frame is assigned an area of the browser window from which it can not exit, it is impossible to escape from it or even modifying parameters such as z-index .

In order to solve this limitation, we can increase the viewing area from the child frame, by accessing the parent frame through window.parent :

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

To begin we will facilitate the location of the frame set in the father's HTML to facilitate the code:

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

In the example, the upper part will have a height of 100 pixels and the lower part will be the rest of the window ( 100,* ).

Now, to be able to show the modal message in full screen we will play with the modal events :

show.bs.modal

This event triggers immediately as soon as the instance method is called to show. If caused by a click, the item that was clicked will be available in the relatedTarget property of the event.

hidden.bs.modal

This event will be triggered when the modal ends its concealment effect to the user (it will wait for the CSS transition to complete).

So we will locate the parent's frameset to change the definition of the attribute rows to one in which the lower frame only occupies 1 pixel and the upper one the rest of the window ( *,1 ) and we reset the original when it is hidden:

/* 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,*';
})

You have an online example available here .