Cómo hacer un cuadro de diálogo modal sobre un iFrame

Escrito por jim campbell | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un cuadro de diálogo modal sobre un iFrame
Cómo hacer un cuadro de diálogo modal sobre un iFrame. (John Foxx/Stockbyte/Getty Images)

Una ventana iframe proporciona a los programadores de HTML un método para mostrar una página Web en segundos utilizando una página de contenedor principal. Para mostrar una ventana emergente modal sobre el iframe, debes programar la página del iframe para luego mostrar la ventana emergente. Se puede crear una ventana modal utilizando el lenguaje jQuery, que es un tipo de lenguaje JavaScript para crear páginas dinámicas después de que el código es cargado en el navegador del usuario.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Haz clic en la página HTML, ASP o PHP que se muestra en el iframe. Haz clic en "Abrir con" y luego selecciona tu editor preferido.

  2. 2

    Crea el código HTML de la ventana emergente. Crea este código en cualquier sección de la página Web ya que el jQuery recupera el ID div y lo muestra en el centro de la ventana del iframe. Escribe lo siguiente para crear el código HTML:

    <div id="modal"> <b>Contenido de la ventana modal</b> | <a href="#" class="close" onclick="closeWindow()">Cerrar</a> </div>

  3. 3

    Agrega la función jQuery para abrir la ventana. Puedes abrir la ventana de forma automática cuando se cargue la página o cuando un usuario haga clic en algún botón. El código siguiente crea la función jQuery para abrir y cerrar la ventana modal:

    function openWindow() { $('#modal').fadeIn(1000); } function closeWindow() { $('#modal, .window').hide(); }

  4. 4

    Vincula la ventana emergente con un botón, una imagen u otro div. En este código de ejemplo, la ventana modal se abrirá cuando el usuario haga clic en un botón:

    <input type="button" onclick="openWindow()">

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles