Div como modal – javascript

¡Necesito un JavaScript que muestre div oculto en el centro de la pantalla como modal con fondo oscuro como el diálogo de jquery!

ejemplo:

Here is the content of the div that should be shown as modal on the center of the page!

¿Quién puede ayudar? Gracias

Un cuadro de diálogo emergente modal simple o cuadro de diálogo se puede hacer mediante propiedades de CSS y un poco de jQuery. La idea básica es simple:

  • 1. Crea un div con fondo semi transparente y muéstralo en la parte superior de tu página de contenido al hacer clic.
  • 2. Muestre su div emergente o div de alerta en la parte superior del divisor semi-transparente de oscurecimiento / ocultación.
  • Entonces necesitamos tres divs:

  • contenido (contenido principal del sitio).
  • ocultador (para atenuar el contenido).
  • popup_box (el div modal para mostrar).
  • Primero, definamos el CSS:

      #hider { position:absolute; top: 0%; left: 0%; width:1600px; height:2000px; margin-top: -800px; /*set to a negative number 1/2 of your height*/ margin-left: -500px; /*set to a negative number 1/2 of your width*/ /* z- index must be lower than pop up box */ z-index: 99; background-color:Black; //for transparency opacity:0.6; } #popup_box { position:absolute; top: 50%; left: 50%; width:10em; height:10em; margin-top: -5em; /*set to a negative number 1/2 of your height*/ margin-left: -5em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; border: 2px solid black; z-index:100; } 

    Es importante que establezcamos que el índice z de nuestro ocultador sea más bajo que el cuadro pop_up, ya que queremos mostrar popup_box en la parte superior.
    Aquí viene el script java:

      $(document).ready(function () { //hide hider and popup_box $("#hider").hide(); $("#popup_box").hide(); //on click show the hider div and the message $("#showpopup").click(function () { $("#hider").fadeIn("slow"); $('#popup_box').fadeIn("slow"); }); //on click hide the message and the $("#buttonClose").click(function () { $("#hider").fadeOut("slow"); $('#popup_box').fadeOut("slow"); }); }); 

    Y finalmente el HTML:

     
    Page's main content.
    ClickMe

    He usado jquery-1.4.1.min.js http://www.jquery.com/download y he probado el código en Firefox. Espero que esto ayude.

    Aquí hay un ejemplo jfiddle de una superposición modal usando jQuery.

    http://jsfiddle.net/r77K8/1/

    Espero que esto te haga comenzar.

    Chelín