jQuery - Wie platziere ich ein DIV auf Überlagerung?

StackOverflow https://stackoverflow.com/questions/383116

  •  23-08-2019
  •  | 
  •  

Frage

Ich versuche, einen modalen Dialog in der geringsten Menge von jQuery-Code wie möglich zu machen, weil mein Projekt hat bereits ein wenig zu viel jQuery hinein geladen.

Also, ich zum ersten Mal ein Overlay benötigt, die 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 muss ich meine 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, habe ich am Ende #test mit einem abgeblendet up, wenn ich nicht will, dass gedimmt werden - nur das, was dahinter. Was ist der Trick?

War es hilfreich?

Lösung

Sehen Sie diese schnell Demo hier liegt der Schlüssel zu dem modalen ist absolut über dem oberen Rand des undurchsichtigen Hintergrund . Die Demo dynamisch fügt den Hintergrund Overlay div und die modale div auf den Körper, aber man kann diese im HTML definieren und ihnen nur zeigen.

Vereinbarte besteht keine Notwendigkeit, ein Plugin für eine modale Wirkung zu verwenden, die meisten der Plugins kommen mit vielen Optionen damit die aufblasen, die Sie nicht wollen, wenn Sie nur die einfachsten Effekte benötigen. - Hinweis: Das können wir nicht 3 in zwei Linien tun - und ohne ein Plugin !!

Auch ist es viel einfacher, CSS-Klassen zu definieren und hinzufügen, anstatt Inline-Styles auf ein Element in Skript hinzuzufügen. Leichter zu pflegen.

Andere Tipps

Ich denke, die beste Lösung könnte sein, eine jQuery-Plugin zu verwenden. Eine schnelle Google-Suche warf diese: http://www.ericmmartin.com/simplemodal/ die das tut, was man in drei Zeilen müssen!

Wenn Sie mehr wollen, gibt es viele auf der jquery Overlays Seite Plugin

Aus dem Blick von ihr, 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 in mehreren externen Jquery-Code, der Sie betroffen sind - aber ich würde vorschlagen, ein gut geschriebenes und stabile Plugin würden Sie viel Arbeit / Zeit / Codezeilen speichern

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top