jQuery UI modal dialog focus issue

by Cliff 1. August 2009

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();
            });

        });

Comments are closed

Cliff Gray's Info

Cliff Gray
Developer/Founder GrayTechnology.com.

E-mail me Send mail

Authors

Calendar

<<  May 2022  >>
MoTuWeThFrSaSu
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

View posts in large calendar

Blogroll

Download BlogEngine.NET

Download at CodePlex

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2022

Subscribe