Javascript Overlay beim Laden der Seite?

  • Themenstarter Themenstarter Wuestenfuchs
  • Beginndatum Beginndatum
W

Wuestenfuchs

Moin,

ich bin leider auf der Ebene von Javascript und jquery nicht gerade ein Fachmann.
Folgendes Beispiel habe ich gefunden:

http://yensdesign.com/tutorials/popupjquery/

Nur möchte ich beispielsweise, dass man dieses Overlay beim Laden der Seite erhält, nicht erst beim Klick auf einen Button oder Link.

Hat da jemand einen Tip?

Danke und viele Grüße -
Der Wüstenfuchs
 
Hallo,
versuchs mal so:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
 <link rel="stylesheet" href="general.css" type="text/css" media="screen" />
 <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
 <script src="popup.js" type="text/javascript"></script>
 <script>
$(document).ready(function() {
  deineJSFunktion();
});
</script>
</head>
<body>
 <center>
 <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
 <div id="button"><input type="submit" value="Press me please!" /></div>
 </center>
 <div id="popupContact">
 <a id="popupContactClose">x</a>
 <h1>Title of our cool popup, yay!</h1>
 <p id="contactArea">
 Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
 <br/><br/>
 We can use it for popup-forms and more... just experiment!
 <br/><br/>
 Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
 <br/><br/>
 <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
 </p>
 </div>
 <div id="backgroundPopup"></div>
</body>
</html>

$(document).ready heißt das Zauberwort! Hier wird alles ausgeführt sobald dei Dokument weitestgehend geladen ist.

Siehe:http://www.learningjquery.com/2006/09/introducing-document-ready

HTH
Gunter
 
Allerdings brauchst du hier nichtmal jquery laden.
"Normales" Javascript kann das genauso.
Javascript: 
window.onload = function(){
  // JS-Code, Funktionsaufruf, etc. pp.
}

Nun erstellst du dir ein Div, gibt's diesem eine Klasse und/oder ID, die du vorher per CSS definiert hast und fügst es dem Body an.
Während des Ladens der Seite wirst du allerdings kein durch Javascript erzeugtes Overlay zu sehen bekommen, da du das durch JS erzeugte Overlay irgendwo anhängen musst - und erst onload ist dein Body bereit ein Element zu empfangen (korrigiert mich, falls ich falsch liege...).

Eine andere Möglichkeit ein Overlay während des Ladens der Seite anzuzeigen wäre ein Div per HTML im Body zu positionieren, und dieses onload auszublenden.
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück