Modal deactivated inside an iframe

Question

Modal deactivated inside an iframe

Navigation

#1 by (1 votes)

1

I am working with an iframe and inside this I am opening a modal, but it happens that when you open it, the modal is completely blocked, it has the effect of becoming gray just like a modal does, but all the content inside the modal is gray. iframe, including the modal, I've been trying to do a window.parent.$("#Modal").modal() but it does not work, it also opens the modal within the iframe. Help!

This is the code I have so far:

<iframe id="formularioTr"  name="formularioTr" height="470px" width="100%" style="border:hidden;">$divpropiedades .= <input id="'.$nombremetadato["idDocumentoPropiedad"].'" '.$eventoblur.'  name="'.$nombremetadato["idDocumentoPropiedad"].'" class="form-control '.$clase.'" type="text" placeholder="Seleccione '.str_replace('_', ' ', $nombremetadato["tituloDocumentoPropiedad"]).'" onblur="abrirModal('.$idLista.',this.value);"> $divpropiedades .= <div id="myModal" class="modal fade" role="dialog">

<!-- Modal content-->
<div style="" class="modal-content">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Selecci&oacute;n de Dependencias</h4>
  </div>
  <div class="modal-body">
    ACÁ VIENE EL CONTENIDO DEL MODAL
  </div>
</div>

The onblur executes a java script function function abrirModal(idLista,value) { window.parent.$("#ListaSelect").modal() }

jquery bootstrap

asked by Santiago Muñoz 09.06.2016 в 15:56

source

1 answer

Error updating web service reference Access the internal elements of a jFrame from another class

score 1 · Answer 1

That happens because the z-index of modal has perhaps changed by a parent element where modal is found, to solve this we must increase the number of z-index , by default it brings 1050 and the backdrop (dark part) brings 1040 .

Many times because of design issues or to identify certain manners they can go into a parent element which has a rule that applies to all their children that must have z-index of 1000 .

To avoid that you can create your rule for modal or for backdrop in your CSS.

.modal-backdrop {
    /*En caso de que quieras modificar el backdrop*/
    z-index: 1040 !important;
}

.modal {
    /*En caso de que quieras modificar el modal*/
    z-index: 1050 !important;
}

NOTE:

Use the same default numbers that the bootstrap brings, but these may vary depending on the z-index of the parent.

In the case of div with class modal you can increase the z-index until you reach the front.

In the case of div with class backdrop may be less than div with class modal .

The !important was added to indicate that the modal must apply that z-index and must be taken into account no matter which one a parent element indicated