Quizás en alguna ocasión hayamos querido mostrar una ventana “estilo modal” por encima del resto del formulario. Es algo muy usado en la programación web y que aumenta de forma considerable la usabilidad del interfaz. Sin embargo, en aplicaciones con muchos controles, nos hemos podido encontrar con un desagradable problema, y es que los controles asp.net DropDownList (Select en HTML) ignoran totalmente el estilo z-index de las capas, y como consecuencia aparecen por encima de nuestra ventana modal, estropeando todo el buen aspecto de la aplicación.

Existen dos soluciones conocidas al problema:

La primera, aunque funciona, conlleva la creación de un script que carga mucho trabajo a la aplicación, y según la cantidad de controles que tengamos, puede no ser una posible alternativa.

for (f = 0; f < document.forms.length; f++)
{
    var elements = document.forms[f].elements;
    // looping through all elements on certain form
 
    for (e = 0; e < elements.length; e++)
    {
        if (elements[e].type == "select-one")
        {
            elements[e].style.display = 'none';
        }
    }
}

Este script recorre todos los controles de nuestro formulario, ocultando aquellos que sean del tipo Select. Claro que si tenemos un número finito de este tipo de controles podemos obviar el bucle e ir directamente al grano.

Una vez los tengamos ocultos podemos mostrar nuestra ventana modal sin riesgo a que sea destrozada por los Select, que estarán ocultos.

Por supuesto hay que controlar que, una vez hayamos acabado con la ventana modal, hay que volver a mostrar estos controles usando el mismo sistema.

La segunda alternativa es mas interesante todavía, aunque parece más un “hack” que otra cosa, y desconozco hasta que punto sería compatible con todos los navegadores. Consiste en hacer uso del elemento “iframe”. Este elemento tiene la característica de aparecer siempre por encima de cualquier otro control web, es decir, incluso por encima de los DropDownList. Y diréis, ¿pero eso no sustituye un problema por otro? Nó exactamente, ya que este elemento admite el estilo z-index y ¡lo cumple!.

Vamos, que podemos mostrar una especie de panel separador entre los controles DropDownList y la ventana modal que queramos mostrar tan solo asignandole un z-index inferior al de nuestra ventana.

Primero añadiríamos el iframe dentro de la ventana que vamos a ocultar y mostrar. Tan solo se mostrará cuando mostremos la ventana.

<iframe id="iframe" class="iframeLayer" frameborder="0"></iframe>

Y segundo, añadiremos el estilo correspondiente tal que:

iframe.iframeLayer
{
    left:600px;
    top:300px;
    position: absolute;
    width: 200px;
    height: 100px;
    z-index: 10;
 
}

Hay que tener especial cuidado en especificar exactamente la misma posición y tamaño que la ventana modal. El iframe se mostrará como un area blanca y ocultará todo lo que esté debajo suyo, pero mostrará nuestra ventana siempre que tenga un z-index superior a 10.

El problema de este método es que queramos crear algo más complejo, o por ejemplo crear un fondo transparente, ya que en ese caso, en lugar de crear un iframe para el area de la ventana, tendremos que crear un iframe para el area de cada control DropDownList que tengamos, lo cual ya es otra historia.

La elección es vuestra. Un saludo

Fuente: CodeProject