$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});Überlagert die gesamte Seite mit einem schwarzen Farbton, deaktiviert alle Links und rückt alles darüber in den Fokus.
Ich frage mich, ob 'fixed' Positionierung auch besser wäre, wenn die Seite gescrollt wird... Ich bin mir nicht sicher, ich sollte das wohl besser testen.
position: fixed; wäre in diesem Fall besser.
Danke.. ^^
Wenn die Position auf 'fixed' gesetzt wird, könnte das die Höhe beeinflussen... wenn der Div auf der Y-Achse überlief, glaube ich.
Vielen Dank, Mann! Ich habe gerade Ihr Snippet-Repository entdeckt und bin begeistert davon!
Danke, Mann :-) Schön und einfach
Ich dachte gerade, vielleicht sollte man prüfen, ob die ID existiert und eine alternative ID erstellen oder abbrechen?
Danke für den schönen Beispielcode
position fixed würde gehen
Perfekt! Wie könnte man das am besten nutzen, und dann ein einzelnes Element darüber haben? Ich habe versucht, den z-index dieses Elements über Ihren zu setzen, aber es wird immer noch grau ausgeblendet – irgendwelche Ideen?
@ryan: Das 'darüberliegende' Element sollte 'position:relative;' haben.
perfekt! wie schön es ist!
Gute Arbeit, Mann ;-)
Ich möchte die Site-Überlagerung für das folgende Problem verwenden
Ich möchte die Überlagerung sehen, während die Seite geladen wird. Auf dieser Seite werden Daten aus einer Datenbank gesammelt.
Wenn das gesamte DB-Laden abgeschlossen ist, soll die Überlagerung automatisch verschwinden.
Kann das gemacht werden?
Und eine zweite Frage: Kann ich ein Preloader-Bild über die Überlagerung legen, das auch verschwindet, wenn die Seite vollständig geladen ist?
Danke!!
Ich möchte ein Dropdown-Menü im Norden-Layout von Jquery Layout verwenden, wie unten angegeben:
http://layout.jquery-dev.net/demos/popups.html
Die Dropdown-Elemente des Menüs liegen hinter dem Layout. Sie überlagern das Layout nicht, um seinen Inhalt vom Norden-Panel anzuzeigen.
Was ist der beste Weg, um die Deckkraft mit IE8 zum Laufen zu bringen?
-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70); Probieren Sie das aus.
Interessanterweise können Sie feststellen, dass ein solches Snippet zwar einen visuellen Effekt erzeugen kann, der das Body-Element überlagert und alles unklickbar macht, aber nicht alle Browser handhaben dies so. Elemente im "Elternelement" sind immer noch über die Tab- & Shift-Tab-Tastenkombinationen erreichbar. Um dies beispielsweise bei der Erstellung eines modalen Dialogs zu verwenden, müssen Sie eine Tabulatorreihenfolge erstellen, die nur durch den Dialog führt und Klick- und Tastendruckereignisse vom Rest des Dokuments entfernt.
Alles ist immer noch ausgegraut. Ich habe position relative versucht, das funktioniert nicht.
vielleicht sollten Sie hinzufügen
zu Ihrem CSS für IE-Browser.
Aber so... ein schönes Snippet.
nicht wirklich, niemand kümmert sich mehr um ie.
Sie haben es gerade so einfach gemacht... warum bin ich nicht darauf gekommen?
Super gefallen.. **
Wie kann ich das CSS für diesen Overlay-Div so codieren, dass er nur auf iPads erscheint? Ich versuche, diese Funktion nur für iPad-Benutzer einzurichten...
Danke!
Darf ich PHP-Mobile-Detect empfehlen? Ich benutze es, um alternative externe Stylesheets für verschiedene Plattformen zu laden, aber es ist durchaus möglich, es nur zu verwenden, um alternativen Code zu
echo, zum Beispiel dieses Snippet, wenn das Skript ein iPad oder ein anderes Tablet erkennt. Es funktioniert mit bedingten Kommentaren, so dass es ziemlich einfach ist, sich darin zurechtzufinden.Ich wünschte, ich wüsste eine Methode ohne PHP, um iOS zu erkennen.
Was ist mit bedingten Media Queries?
Gefunden hier
danke
Wie schließe ich das? Ich versuche alles, einschließlich
$(‘body #overlay’).css(‘display’, ‘none’);
Ich erziele aber keine Ergebnisse...
Peter
1- $(“#overlay”).remove();
2 -$(“#overlay”).hide();
Danke! Ich habe es letzte Woche herausgefunden... Ich hätte das vielleicht erwähnen können, um anderen keine Hirnschmalz zu verschwenden... :)
Gibt es übrigens bessere Möglichkeiten, dies heutzutage zu tun?
Wir sind auf dieses Problem auf IOS gestoßen
Nach Eingabe von Benutzername/Passwort – die Tastatur bleibt geöffnet, dann auf Senden klicken – die Tastatur schließt sich und die Überlagerung füllt nicht den gesamten Bildschirm.
Danke!
man muss nicht die Dokumentenhöhe ermitteln, gib sie einfach an <br/>
.overlay{<br/>
opacity : 0.4;<br/>
position: fixed;<br/>
top: 0;<br/>
right: 0;<br/>
bottom: 0;<br/>
left: 0;<br/>
background-color: black;<br/>
z-index: 500;<br/>
}<br/>
<br/>
Dann einfach hinzufügen <br/><br/>
$("#overlay").addClass('overlay');
man muss nicht die Dokumentenhöhe ermitteln, gib sie einfach an <br/>
.overlay{
opacity : 0.4;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
z-index: 500;
}
<br/>
Dann einfach hinzufügen <br/><br/>
$("#overlay").addClass('overlay');
Ich möchte die Überlagerung verwenden, um den Benutzer daran zu hindern, den Inhalt zu sehen, bis er sich registriert hat. Wie schließe ich die Überlagerung, sobald der Benutzer auf Login klickt?
Das hat mit einigen Modifikationen gut funktioniert.
Wenn jemand den Popup fixieren und immer zentrieren möchte (damit man nicht daran vorbeiscrollen kann).
.collapse {
position: fixed;
width: 700px; (kann geändert werden)
margin-left: -350px; (wenn die Breite geändert wird, sollte dieser Wert die Hälfte der Breite sein)
left: 50%;
top: 0;
}
Danke!
Vielen Dank! Du bist spitze.
Warum verwenden wir nicht min-height:100%?
Hallo, ich habe den Code zum Laufen gebracht, aber ich möchte eine Funktion zum "Wegklicken" (Schließen der Überlagerung) hinzufügen. Ich bin ein Neuling, wenn es ums Programmieren geht, kann mir jemand einen Hinweis geben, wie ich das beheben kann?
Nicht nur, dass Ihre Technik JavaScript verwendet (verdammt, das *erste*, was man in Ihrem Beispiel sehen muss, ist ein Link, der auf javascript:void() zeigt!!), sondern sie ist nicht einmal mit ausgeschaltetem JavaScript nutzbar, wofür Alternativen genau gut sind.
Ehrlich gesagt, ich sehe keinen Sinn darin.
Die Überlagerung für BlockUI? Wie schließt man sie, nachdem sie aufgerufen wurde?
Mein Jquery-Code ist
$(document).ready(function(e) {
$(“.mus_play > div”).click(function(){
$(function() {
var docHeight = $(document).height();
$(“body”).append(”
„);
An Luchid (oben) und andere Website-Master wie ihn: Warum nicht einfach einen kleinen Text auf Ihrer Hauptseite anbringen, auf dem steht, dass eine Registrierung erforderlich ist, um Ihre Website anzuzeigen? Diese Überlagerungen sind unglaublich nervig und nicht so cool, wie Sie denken. Es ist ärgerlich, wenn Seiten geladen, geklickt oder überfahren werden und solche unerwünschten Dinge auftauchen.
Warum haben Sie
$("#overlay").height($(document).height());anstelle von$("#overlay").css({height:'100%'});verwendet?Gibt es ein Kompatibilitätsproblem?
Danke
Das hat mit einigen Modifikationen gut funktioniert.
Wenn jemand den Popup fixieren und immer zentrieren möchte (damit man nicht daran vorbeiscrollen kann).
.collapse {
position: fixed;
width: 700px; (kann geändert werden)
margin-left: -350px; (wenn die Breite geändert wird, sollte dieser Wert die Hälfte der Breite sein)
left: 50%;
top: 0;
}
Danke!
man muss nicht die Dokumentenhöhe ermitteln, gib sie einfach an
.overlay{
opacity : 0.4;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
z-index: 500;
}
Dann einfach hinzufügen
$(“#overlay”).addClass(‘overlay’);
Wie schließe ich das? Ich versuche alles, einschließlich
$(‘body #overlay’).css(‘display’, ‘none’);
Ich erziele aber keine Ergebnisse...
Wie implementiere ich das von Anfang bis Ende?
Danke!
Newbie
Ich möchte die Überlagerung verwenden, um den Benutzer daran zu hindern, den Inhalt zu sehen, bis er sich registriert hat. Wie schließe ich die Überlagerung, sobald der Benutzer auf Login klickt?
Gibt es einen besseren Weg, dies in reinem Javascript zu tun?
Wie verwende ich das auf meiner Weebly-Website?
Vielen Dank!!