jQuery UI modal dialog focus issue

I noticed while using the jQuery UI modal dialog that if you have a link (or form element) within your HTML in the modal, the focus will be given to the first one.  If the element is further down on the modal, then it will scroll down, which is not the desired behavior.

To correct this, I simply added a link at the top of the modal and gave it focus:

 Place at top of modal HTML:

<a id="top" href="#" ></a>

In document ready, add focus to #top:

jQuery(document).ready(function() {

            // Tell jQuery that our div is to be a dialog
            jQuery("#dialogTOS").dialog({ autoOpen: false, height: 400, width: 900 });

            jQuery('#linkTOS').click(function() {
                jQuery('#dialogTOS').dialog('open'); 

               // Focus on top element
                jQuery('#top').focus();
            });

        });

Add comment