modales Pop-up mit jQuery schreiben - jquery

Ich versuche zu verstehen, wie modale Fenster funktionieren. Ich weiß, dass es mehrere Plug-Ins gibt, aber ich möchte meine eigenen schreiben - eine einfache.

- Ich kann eine jquery-Funktion hinzufügen, um die ausgeblendete Ebene anzuzeigen, wenn auf ein Element auf einer Seite geklickt wird.

- Ich kann es über den Seiteninhalt laden, aber CSS optimieren, aber ich bin mir immer noch nicht sicher, wie ich ein paar Dinge tun soll.

Wie kann ich beispielsweise den Rest der Seite unter dem Fenster ausblenden?

Vielen Dank.

Antworten:

1 für die Antwort № 1

Sie müssen eine andere Ebene zwischen dem modalen Inhalt und dem Rest der Seite verwenden. Dies wird normalerweise als Überlagerung bezeichnet. Das Overlay ist (normalerweise) schwarz oder weiß gefärbt und leicht undurchsichtig.

Für beste Ergebnisse

body, html      { width: 100%; height: 100% }

Damit die Überlagerung nicht durch die Größe des Körpers / HTML eingeschränkt wird.

div.overlay     { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 12000 }

Dann hängen Sie das Overlay an:

var overlay = $("<div />").css({opacity: ".8" }).addClass("overlay");
$("body").append(overlay);

Wo Sie anfangen, auf Probleme zu stoßen, ist älterBrowser wie IE 6, die eine Dropdown-Liste über Z-Index-gesteuerten Elementen anzeigen. Dazu müssen Sie eine versteckte Iframe-Technik unter dem Inhalt verwenden.

---

1 für die Antwort № 2

Nehmen wir zum Beispiel was jQuery "s Dialog tut. Es verwendet eine div Element mit einer expliziten Breite und Höhe festgelegt(wird dynamisch über Javascript berechnet) und steht absolut links oben. Um den verblassten Effekt zu erzielen, wird ein Hintergrundbild mit Deckkraft festgelegt (für IE gilt filter: alpha(opacity = 50); ebenfalls).

Markup:

<div class="ui-widget-overlay" style="width: 1263px; height: 1274px; z-index: 1003;"></div>

CSS:

.ui-widget-overlay
{
background-image: url("path/to/dark-image.png");
opacity: 0.5;
left: 0;
position: absolute;
top: 0;
}

---