Jquery Popup-box für Netobjects Fusion

Auf der Startseite ist dem einen oder anderen möglicherweise das kleine Fenster aufgefallen, in dem ich die neuen Kurse im NOF-Camp ankündige. Die Box ist eine kleine und recht einfache jquery-Anwendung, die sich auch in Netobjects Fusion einbauen lässt.

Da die Box kein echtes Popup wird sie nicht via Popup-Blocker geblockt. Der Einbau ist dank der Online-Apis von Google (wie wir sie auch für den Datepicker nutzen) recht simple und für den Look lässt sich aus einer Fülle verschiedener Online-Styles wählen.

Auch prima: Da der Text ein div ist, wird er auch von google gefunden und indiziert.

das kommt zwischen die Headtags der Seite

Alle js-Dateien und CSS-Dateien verlinken wir mit einer Online-Version die Google zur Verfügung stellt. So müssen wir keine Dateien downloaden und als Asset einfügen. Auch die gefürchtete Referenzierung des Pfads entfällt. Achtet auf die fette Markierung: das ist der genutzte Style - dieser Name kann geändert werden (siehe unten).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="all" />

Das kommt ans Ende des Body

Bitte aufmerksam lesen: hier versteckt sich der Teil, in dem Ihr euren eigenen Text einfügen könnt ;-)

<script type="text/javascript">
   $.ui.dialog.defaults.bgiframe = true;
   $(function() {
      $("#dialog").dialog();
   });
   </script>
<!-- hier kommt überschrift und Fließtext-->
<div id="dialog" title="RappZapp - das ist mal flott!!">
<p>und hier der wichtige fließtext</p>
</div>

Wem die Farbe nicht gefällt...

Statt redmond kann man aus Unmengen an fertigen Farbkombinationen wählen - hier eine kleine Auswahl

1. blitzer
2. start
3. vader
4. redmond
5. und viele mehr

Eine Übersicht (und das sind wirklich viele ) findet ihr hier (Leerzeichen im Namen durch Bindestrich ersetzen... ;-)

http://jqueryui.com/themeroller/

Das wars - viel Spaß damit