Home > CSS, JavaScript > Bei Mausklick einen Layer öffnen (jQuery)

Bei Mausklick einen Layer öffnen (jQuery)

Detailierte und zusätzliche Informationen zu einem Thema auf einer Webseite kann man per Klick auf einen Link in einem Layer bzw. Popup anzeigen lassen. Das macht in vielen Fällen Sinn, weil man den Nutzer nicht sofort mit Sachen bombadiert, die für ihn eher uninteressant sein könnten.

Der Inhalt wird erst beim aktiven Klicken im aufgegangenen Layer (Popup) erscheinen. Wird mit der Maus auf den äußeren Bereich geklickt, dann sollte der geöffnete Layer verschwinden von selbst verschwinden. Es gibt natürlich auch diverse Möglichkeiten den Layer erst zu schließen, wenn der Nutzer auf einen Button „Schließen“ oder ein Kreuz geklickt hat, was hier auch relativ geläufig ist.

In diesem Tutorial möchte ich ein Code-Beispiel vorstellen, wie man mit jQuery und jQuery UI erst bei Klick einen Layer öffnen kann. Zuerst einmal muss man das jQuery Framework und UI (User Interface) in unsere HTML Seite einbinden. Dazu werden im Head-Teil folgende Javascripte und ein Userinterface Theme eingebunden. Dazu kann man Links des CDN von beispielsweise Google nehmen:

Anschließend brauchen für unser Beispiel noch einen Text, der einen Link beinhaltet. Bei Klick auf diesen Hyperlink soll unser Script der Layer einblenden:

Der Text und ein Link ist jetzt im Body der HTML-Seite gesetzt. Auch das div Element, welches unseren Infolayer nach dem Mausklick darstellen soll, ist im Code enthalten. Das div soll beim Laden der Seite nicht erscheinen. Das bewirkt die CSS Style-Regel mit der Eigenschaft display: none.

Was jetzt noch fehlt ist das jQuery Script für den click Event sowie die Initialisierung für das Laden des Layers. Wir platzieren den Javascript Code vor das Body Element in unsere Webseite. Dieses sieht wie folgt aus:

Bei einem Klick auf das Element mit class=“link“, in diesem Beispiel unser Anker (Hyperlink), wird das div mit jQuery UI mit dem Befehl .dialog() als Dialog geöffnet. Das Fenster lässt sich standardmäßig beliebig verschieben. Dieses Verhalten kann mit einer Einstellung für den Dialog deaktiviert werden.

  1. Bisher keine Kommentare
  1. Bisher keine Trackbacks