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

        });

Related posts

Comments are closed

Cliff Gray's Info

Cliff Gray
Developer/Founder GrayTechnology.com.

E-mail me Send mail

Authors

Calendar

<<  May 2019  >>
MoTuWeThFrSaSu
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

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 2019

Subscribe