javascript - problema - ventana modal

Telón de fondo modal de Twitter Bootstrap no cubre toda la pantalla en el iPad

Question

Estoy usando el componente modal dentro del paquete Twitter Bootstrap. Este modal se abre desde un clic de botón, y su contenido se carga dinámicamente a través de una llamada Ajax. Todo lo anterior funciona bien en PC (FF, Chrome) y también en el iPad (Safari). Sin embargo, en el iPad si la pantalla se desplaza hacia abajo un poco antes de hacer clic en el botón, el fondo del modo modal solo cubrirá parte de la pantalla (dependiendo de cuánto se desplaza hacia abajo la pantalla). El fondo salta a su posición correcta (cubriendo toda la pantalla detrás del modal) si la página se desplaza en absoluto.

Agradecería cualquier ayuda con esto, ya que se ve bastante feo con el telón de fondo cubriendo solo parcialmente la pantalla.

Cosas que no lo afectan:

• la clase "fade"
• El posicionamiento del código modal dentro del DOM.
• Desplazamiento manual de la página a través de Javascript

A continuación incluiré algunos códigos eliminados (controles internos y otros eliminados por brevedad).

El modal:

<div id="tehtavaModal" class="modal hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal" href="#">&times;</a>
        <h3 id="tehtavaModalOtsikko"></h3>
    </div>
    <div class="modal-body">
        <div id="tehtavaModalSisalto"></div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Sulje</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal">Tallenna Vastaukset</a>
    </div>
</div>

La función para abrir el modal:

function haeTehtava(tehtavaID) {
    $(''#tehtavaModalOtsikko'').html(''Tehtävä'');
    $(''#tehtavaModalSisalto'').html(''<p>Tehtävää haetaan...</p>'');
    $(''#tehtavaModalKysymykset'').html('''');
    $(''#myCarousel'').hide();

    $.getJSON("Sivu/HaeTapahtuma", { ''tyyppi'': 4, ''ID'': tehtavaID }, naytaTehtava)
        .error(function () { $(''#tehtavaModalSisalto'').html(''<div class="alert alert-error">Tehtävän haussa tapahtui virhe.</div>''); });
    $(''#tehtavaModal'').modal();
}

La función de devolución de llamada (naytaTehtava) simplemente rellena algunas de las secciones internas del modal.

El enlace que llama a la función:

<a href="#" onClick="haeTehtava(1);">Open Modal</a>

El ejemplo dado en la página Twitter Bootstrap funciona, entonces me pregunto ¿qué podría estar haciendo diferente?

EDITAR: Una nota adicional, si el modal se abre usando los atributos de datos, funciona bien. El problema solo se muestra al abrir el modal por script.

Answer 1

Resulta que estaba buscando demasiado profundo para el problema. El enlace que abre el modal debe tener un href = "# myModal" para establecer la pantalla en el modal. Solo tenía un href = "#" que aparentemente descartaba el modal de Twitter Bootstrap porque estaba desplazándose hacia la parte superior de la página (y el modal estaba ubicado en la ubicación desplazada).

Camino equivocado

<a href="#" onClick="$(''#myModal'').modal();">Open Modal</a>

Manera correcta

<a href="#myModal" onClick="$(''#myModal'').modal();">Open Modal</a>

Alternativamente

<a href="" onClick="$(''#myModal'').modal(); return false;">Open Modal</a>

Gracias a @baptme porque ir a jsFiddle me hizo comprender por qué la página se desplazaba.