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 🙂