jQuery UI Dialog neben Mauszeiger

Die Dialoge im jQuery UI sind sehr nütztlich und sehen auch gut aus 😉 – Ein Problem hat der Dialog aber, man kann die Position, wo das Dialog-Fenster angezeigt wird, nicht neben den Mauszeiger positionieren. Ziel war es, dass sich der Dialog beim Klick auf ein Element öffnet – in der Nähe des Mauszeigers. Nun ist es aber möglich über ein Click-Event, an die Mausposition zu kommen und diese dem Dialog zu übergeben.. 🙂 Bei der Suche mit Google findet man dabei immer eine Seite: http://jsbin.com/okosi4 – der Autor ist leider unbekannt. In dem Beispiel werden Parameter genutzt, welche leider in der jQuery Doku nicht erwähnt werden.. 🙁

Das Prinzip beruht jetzt einfach darauf den Dialog mit verschiedenen Parametern zu starten, im Click-Event des Elementes. Damit steht die Variable event zur Verfügung. Mit offset kann ein einzusätzlicher Abstand zum Mauszeiger erzwungen werden.

<input id="testBtn" type="button" value="Click Me!" 
  onclick="jQuery("#testDiv").dialog(
    { modal:true,  width: 500, autoOpen: true, 
     position: {   my: 'left top',   
                   at: 'right bottom',   
                   of: event,    
                   offset: '20 20'  }
                }
     ); " 
 />

Es ist ebenso möglich ein Element zu binden:

jQuery("#testBtn").click(function(event){
   jQuery("#testInhalt").dialog({ modal:true,  width: 500,
       autoOpen: true});
   jQuery("#testInhalt").dialog("option", "position", 
   { my: "left top", at: "right bottom", of: event,  
       offset: "20 20"  });
});

In diesem Beispiel wird der Button gebunden und das Dialog-Fenster angewiesen sich beim Click zu öffnen. Wird der Dialog initialisiert, bevor geklickt wird, kümmert sich jQuery UI auch noch darum das Element zu verstecken (display:none). Dann muss aber autoOpen auf false gesetzt werden 🙂

Über den Autor Danny Sotzny

Hallo, ich bin Danny Sotzny und bin Software- entwickler und Fotograf. Dabei beschäftige ich mich mit aktuellen Technologien und bekannten Problemen. Schwerpunkte setze ich bei der Webentwicklung (PHP/JS) und der Software- entwicklung mit .NET (C#). Der Blog dient für mich selbst als Gedächtnishilfe für typische und alltägliche Probleme, aber auch persönliche Erlebnisse werden veröffentlicht. Ich betreibe zusätzlich noch Foto-Sotzny.de für meine Fotografien und sotzny.net, was meine Webseite für die Softwareentwicklung ist.

Über Danny Sotzny

Hallo, ich bin Danny Sotzny und bin Software- entwickler und Fotograf. Dabei beschäftige ich mich mit aktuellen Technologien und bekannten Problemen. Schwerpunkte setze ich bei der Webentwicklung (PHP/JS) und der Software- entwicklung mit .NET (C#). Der Blog dient für mich selbst als Gedächtnishilfe für typische und alltägliche Probleme, aber auch persönliche Erlebnisse werden veröffentlicht. Ich betreibe zusätzlich noch Foto-Sotzny.de für meine Fotografien und sotzny.net, was meine Webseite für die Softwareentwicklung ist.
Dieser Beitrag wurde unter Javascript, jQuery, jQuery UI, Programmierung veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Ein Kommentar zu jQuery UI Dialog neben Mauszeiger

  1. Smithers sagt:

    Klappt leider nicht im IE9

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.