Attach jQuery dialog to textbox and make it disappear when user clicks something else?

Question

I like the jQuery DatePicker widget. It is very convenient that when a user clicks on a date field in his web application, the user sees a dialog that allows her to select a date.

Which is even better, since the date picker is so unobtrusive. If the user does not want to use datepicker, she can easily enter the date on her own. In addition, the datepicker automatically disappears when the user clicks on anything that is not a datepicker, or switches focus to another field.

What I would like to do is the same functions as in the jQuery dialog. Basically, I want to create a dialog with some widgets that the user can use to select a value for a text field.

I want the dialog box to automatically appear below the text box when the field is selected. I want it to disappear automatically after the user switches focus somewhere else.

To do this, I attached a handler to the .focus event text field in jQuery to open a dialog box. This works great. :-)

I tried to add a handler to the .blur event .blur that the dialog box .blur automatically when the user has moved to another place. However, simply opening the dialog box raises the blur event to fire, closing it: - /

In addition, I do not know how to make the dialog appear directly below the text box in the same way as datepicker does.

How can I create a jQuery dialog next to a text box and disappear accordingly, like a datepicker?

Answer 1

See the example below.

First, in order for the dialog box to appear below the input, use position:absolute and the jQuery .offset() method to find the position of the corresponding input, to assign values ​​to the position of the dialog. For instance:

 $('#input').focus(function(e){ var $t = $(this), $d = $('#dialog'), to = $t.offset(); $d.css({ 'position':'absolute', 'top':to.top + $t.height() + 4, 'left':to.left }) .show(); }); 

In the above, I positioned the dialog by adding the top input value to the input height plus a 4px buffer.

Secondly, to hide the dialog, attach the click handler to the document, which does not hide the dialog box, if the purpose of the event is either a dialog or an input. For instance:

 $(document).click(function(e){ if (e.target.id !== "dialog" && e.target.id !== "input") { $('#dialog').hide(); } } 

See an example.

Answer 2

I can not give a direct answer. but my first attempt is to watch DatePicker do the trick with the position here

It seems to me that the widget is dynamically generated when necessary and does not fit there from the very beginning.

Answer 3

If you want to use the jQuery UI-Dialog functions, here is one way:

 $('#main').find('input').click(function(e) { var $box = $('<div class="box" />').html('In dialog'); // make a dialog var xpos = $(this).position().left; // get position of clicked field var ypos = $(this).position().top + 20; $box.dialog({ // trigger the dialog position: [xpos, ypos], // position it relative to clicked object close: function() { // destroy on close for neatness $(this).dialog('destroy'); } }).mouseleave(function() { // if you mouseout: $(this).dialog('close'); // close the dialog }); }); 

Example: http://jsfiddle.net/redler/dAr69/