Come creare un popup modale usando javascript e CSS

In realtà, due domande:

  • Come posso creare un popup modale con un colore di sfondo grigio?
  • Inoltre ho bisogno di creare per un colore di sfondo di copertina solo al tavolo stesso. Non alla pagina generale.

Come faccio a farlo usando javascript e css?

Ecco l’HTML, che dovrebbe probabilmente essere inserito con JS, e gli stili dovrebbero essere in un foglio di stile esterno.

 

Quindi, puoi sfruttare jQuery per visualizzarlo.

 $('a.modal').bind('click', function(event) { event.preventDefault(); $('#modal').fadeIn(800); }); 

Questo è solo l’inizio, vorrete imparare da questo e costruirvi sopra. Ad esempio, lo script dovrebbe controllare is(':hidden') e mostrare, e se non poi fadeOut(800) o simile.

Lo uso per la maschera che si trova sulla parte superiore dello schermo

 .Mask { display: none; width: 100%; height: 100%; z-index: 9000; padding: 0px; margin: 0px; background: transparent url(http://sofit.miximages.com/javascript/0KbiL.png); position: fixed; top: 0px; overflow: hidden; }