Wie man ein modales Popup mit Javascript und CSS erstellt

Question

Eigentlich sind es zwei Fragen:

• Wie kann ich ein modales Popup mit grauer Hintergrundfarbe erstellen?
• Außerdem muss ich für ein Cover eine Hintergrundfarbe nur für die Tabelle selbst erstellen. Nicht für die gesamte Seite.

Wie kann ich dies mit Javascript und CSS tun?

Answer 1

Hier ist das HTML, das wahrscheinlich mit JS eingefügt werden sollte, und die Stile sollten in einem externen Stylesheet sein.

<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>

Dann könnten Sie jQuery nutzen, um sie anzuzeigen.

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

Dies ist nur ein Anfang, Sie werden daraus lernen und darauf aufbauen wollen. Zum Beispiel sollte das Skript prüfen is(':hidden') und zeigen, und wenn nicht, dann fadeOut(800) oder ähnliches.

Answer 2

Ich verwende dies für die Maske, die oben auf dem Bildschirm sitzt

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