Ventana modal sólo con CSS

30/Ene/2008 1196

A raíz de mi proyecto musical más reciente lanzado, incluyendo el sitio web donde me divertí mucho utilizando Mootools para sus diferentes funcionalidades, iré ampliando los artículos relacionados con este framework de JS explicando los puntos más importantes de su desarrollo. Pero para comenzar, mostraré un modo de crear ventanas modales (lightbox, thickbox, greybox, modalbox… son todas ventanas modales) sólo con CSS. Mientras puedo, ahorro en plugins para no recargar los sitios, y en el caso de las ventanas emergentes no-obstructivas utilicé un elegante método donde a través de simple CSS se abren ventanas con mensajes varios. Para gatillarla, utilicé, claro, Mootools. Pero donde tomé prestado la idea, utilizaban Javascript puro para ello. Mostraré ambos métodos, a gusto y necesidad del usuario cuál decidir ocupar.

Comenzamos con el marcado HTML. Primero, un <div class="overlay"></div> el que será el fondo semi-transparente que cubrirá la página entera, y albergará la ventana del mensaje. Luego, un <div class="modal"> que contendrá el mensaje o contenido de nuestra ventana modal. Estas 2 classes, .overlay y .modal, estarán escondidas desde un principio (display: none;) y serán gatilladas desde algún link (display: block;). Después de ellas, el contenido del resto del sitio web.

<div id="fade" class="overlay"></div>>
  <div id="light" class="modal">
     <p>Lorem ipsum dolor sit.....</p>
  </div>
<p>Texto del sitio web. Con un <a href="">link</a> abriremos la ventana.</p>

Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del método cross-browser:

.overlay{
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index:1001;
     opacity:.75;
     -moz-opacity: 0.75;
     filter: alpha(opacity=75);
}

Y la ventana modal del contenido mismo:

.modal {
     display: none;
     position: absolute;
     top: 25%;
     left: 25%;
     width: 50%;
     height: 50%;
     padding: 16px;
     background: #fff;
     color: #333;
     z-index:1002;
     overflow: auto;
}

Ver ejemplo sólo con CSS

Ahora, lo echamos a andar. A ambos div‘s debemos darle id‘s únicos, los que nos ayudarán a identificar los elementos que serán mostrados vía Javascript. La orden para ejecutarlos es en Javascript puro:

document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'

Y a través de Mootools:

$('light').setStyle('display', 'block');
$('fade').setStyle('display', 'block');

Lo que dice ahí, en castellano universal es: toma los elementos con el id light y fade, y agrégales estilo display: block; a cada uno. O sea, los hará aparecer desde display: none (oculto) a display: block; (visible).

Ver ejemplo funcionando con JS

Links

Comentarios

  1. zyrtec on sale this week [#]

    alegrias – http://allergyd.com

  2. side effects of cetirizine hcl [#]

    zyrtec pregnancy category – https://allergyd.com

  3. nurtec [#]

    buy cetirizine 10mg – http://allergyd.com

  4. ivermectin tablets [#]

    Global Dope Far this product
    https://ivermectinstrom.com ivermectin for dogs
    https://ivermectinstrom.com ivermectin for humans uk
    https://stromectolivermect.com ivermectin australia
    https://stromectolivermect.com ivermectin uk
    https://ivermectinst.com ivermectin cream uk

  5. Maryblabs [#]

    ivermectin 9mg

  6. where can i buy cetirizine [#]

    ceftaroline – http://allergyd.com

  7. Jackblabs [#]

    viagra without prescription canada

  8. zyrtec side effects and warnings [#]

    generic zyrtec d walgreens – http://allergyd.com

  9. ivermectin 3 mg [#]

    Global Low-down Far this product
    https://ivermectstromect.com ivermectin clinical trials
    https://stromectolivermect.com canine ivermectin for sale
    https://ivermectinsts.com can you buy ivermectin over the counter
    https://ivermectinst.com ivermectin over the counter
    https://stromectolivermect.com avermectin

  10. drineeezgy [#]

    accutane before and after accutane side effects

  11. stromectol [#]

    Global Information Far this outcome
    https://ivermectinst.com ivermectin tablets
    https://ivermectinst.com fda ivermectin
    https://ivermectinst.com ivermectin for humans over the counter in mexico
    https://ivermectinstrom.com ivermectin for sale for humans
    https://ivermectinstrom.com ivermectin tabletten

  12. Recharge mobile [#]

    What a good blog for recharge mobile

  13. modafinilwithdrawal [#]

    provigil dosage buy provigil

  14. bactrim ds [#]

    bactrim dosage side effects for sulfamethoxazole trimethoprim

  15. stromectol over the counter walgreens pharmacy [#]

    Accustomed Message Here this offshoot
    https://stromectolivermect.com ivermectin for humans over the counter in mexico
    https://stromectolivermect.com ivermectin uk
    https://ivermectinst.com buy ivermectin pills for dogs
    https://ivermectinsts.com side effects of ivermectin
    https://ivermectinstrom.com ivermectin 12 mg

  16. pharmaceptica.com [#]

    chloroquine amazon https://www.pharmaceptica.com/

  17. buy accutane [#]

    accutane before and after https://isotroinisotretinoin.com/

  18. modafinilotc [#]

    adderall vs modafinil modalert online

  19. ivermectin 1.87% humans [#]

    buy ivermectin for humans uk https://stromectolforte.com/ ivermectin tablets where to buy invermetin for humans

  20. www.pharmaceptica.com [#]

    prescription tadalafil online https://pharmaceptica.com/

  21. stromectolforte.com [#]

    ivermectin 3 mg na dosis ng tablet https://stromectolforte.com/ ivermectin liб»Ѓu viГЄn 3 mg ivermectin

  22. provigilprescription [#]

    provigil cost modafinil smart drug

  23. bactrim coverage [#]

    sulfameth trimethoprim 800 160 tb bactrim and alcohol

  24. buy isotretinoine [#]

    https://tretivaisotretinoin.com/ buy isotretinoine

  25. cialis 20 mg [#]

    doctor channel http://cialisbob.com – cialis daily cost

  26. stromectolforte.com [#]

    buy ivermectin nz https://stromectolforte.com/ ivermectin for humans ivermectine

  27. stromectol [#]

    stromectol without prescription http://stromectolforte.com/ stromectol 12mg online stromectol 3mg tablets

  28. nuvigilvsprovigil [#]

    buy provigil online provigil 100 mg

  29. cialis20walmart.com [#]

    health insurance providers http://cialis20walmart.com – cialis daily use cost

  30. ivermectin horse paste for sale [#]

    ivermectin clinical trials https://stromectolforte.com/ ivermectin 온라인 구매 purchase stromectol online

  31. stromectolforte.com [#]

    ivermectin for humans for sale https://stromectolforte.com/# ivermectin tablets ivermectine coronavirus

  32. stromectolforte.com [#]

    ivermectin parasite kills list http://stromectolforte.com/# ivermectin ivermektin 3 mg tabletta adag

  33. cialis pills [#]

    cialis without a doctor prescription buy cialis online

  34. stromectolforte.com [#]

    stromectol for sale http://stromectolforte.com/ can you buy stromectol over the counter stromectol 3 mg

  35. Carlblabs [#]

    tadalafil cheap online

  36. stromectol [#]

    Global Message Fro this outcome
    https://ivermectstromect.com ivermectin over the counter
    https://ivermectinstrom.com stromectol
    https://stromectolivermect.com ivermectin tablets
    https://ivermectinsts.com ivermectin 12 mg
    https://ivermectinst.com ivermectin tablets

  37. Kiablabs [#]

    how to buy viagra without prescription

  38. provigilandalcohol [#]

    modafinil uses buy provigil

  39. ivermectin 12 mg [#]

    Accustomed Low-down About this by-product
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectinst.com ivermectin 6 mg
    https://ivermectstromect.com ivermectin for sale
    https://ivermectinstrom.com ivermectin 12 mg
    https://ivermectinst.com stromectol

  40. stromectol [#]

    Global Message About this product
    https://ivermectinstrom.com ivermectin over the counter
    https://ivermectinsts.com ivermectin for sale
    https://ivermectinst.com ivermectin tablets for humans for sale
    https://ivermectstromect.com ivermectin for humans
    https://ivermectinsts.com ivermectin for sale

  41. stromectol [#]

    Accustomed Message About this outcome
    https://ivermectinstrom.com ivermectin for humans
    https://ivermectinstrom.com ivermectin tablets
    https://stromectolivermect.com ivermectin tablets for sale
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectinsts.com ivermectin 12 mg tablet for sale

  42. modafinilforsale [#]

    modafinil online provigil uses

  43. drineevehq [#]

    sulfameth trimethoprim 800 160mg tb trimethoprim sulfamethoxazole

CSSLab