jQuery - Wie platziere ich ein DIV auf Overlay?

Question

Ich versuche, einen modalen Dialog mit möglichst wenig jQuery-Code zu erstellen, da mein Projekt bereits zu viel jQuery enthält.

So musste ich zuerst ein Overlay, das mit erreicht:

$('body').wrapInner('<div />') 
.css('opacity','0.5') 
.css('z-index','2') 
.attr('id','dim1'); 

Mißachtung jetzt, dass ich eine andere Routine, die Click-Ereignisse auf # dim1 zu töten, während diese modal vorliegt. So, jetzt muß ich meinen modalen Dialog oben ziehen:

$('body').append('<div id="test">My Test</div>'); 
$('#test') 
.css('opacity','1.0') 
.css('position','fixed') 
.css('color','#000') 
.css('z-index','2000') 
.css('height','300px') 
.css('width','300px') 
.css('top','50%') 
.css('left','50%'); 

Allerdings, wenn ich dies tun, ich am Ende mit einem abgeblendet #test, wenn ich nicht will, dass gedimmt werden - nur das Zeug dahinter. Was ist der Trick?

Answer 1

Sehen Sie diese schnelle demo hier der Schlüssel liegt an der Modalität ist absolut über die Oberseite des undurchsichtigen Hintergrunds. Die Demo fügt dynamisch das Hintergrund-Overlay div und das Modal-Div dem Body hinzu, aber Sie können diese im HTML-Code definieren und einfach anzeigen.

Vereinbart, es gibt keine Notwendigkeit, ein Plugin für einen modalen Effekt zu verwenden, die meisten der Plugins kommen mit vielen Optionen daher die Aufblähung, die Sie nicht wollen, wenn Sie nur die einfachsten Effekte benötigen. - Beachten Sie, dass wir dies in zwei Zeilen anstatt in 3 - und ohne ein Plugin tun können !!

Es ist auch viel einfacher, CSS-Klassen zu definieren und diese hinzuzufügen, als Inline-Stile zu einem Element im Skript hinzuzufügen. Leichter zu pflegen.

Answer 2

Ich denke, Ihre beste Lösung könnte sein, ein jquery-Plugin zu verwenden. Eine schnelle Google-Suche hat dieses Problem aufgeworfen: http://www.ericmmartin.com/simplemodal/ was macht, was Sie in drei Zeilen benötigen!

Wenn Sie mehr wollen, gibt es viele auf dem jquery overlays plugin page

Aus dem Blick davon ist die CSS der Schlüssel, um die Dinge richtig zu machen, und die meisten dieser Beispiele sollten mit Demo-CSS kommen für Sie anzupassen .

Offensichtlich bringt dies mehr externen jquery Code mit sich, worüber Sie besorgt sind - aber ich würde vorschlagen, dass ein gut geschriebenes und stabiles Plugin Ihnen viel Arbeit/Zeit/Zeilen Code sparen würde!