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 🙂
Klappt leider nicht im IE9