Cross-domain tabbing issues with SimpleModal

I’ve been using Eric Martin’s brilliant SimpleModal jQuery plugin for a couple of weeks now and am loving it’s simplicity.

However, I’ve run into a problem whereby if I use an iframe, with a source which points to a different domain, then I cannot tab into my modal dialog. This is because SimpleModal works out the first and last input elements in the modal dialog to ensure that you cannot tab out of it (after all, you don’t want your users tabbing to controls which should not be enabled!). However, if the iframe has loaded a page from a different domain then javascript is unable to “see” the input elements inside the page (due to cross-domain policy).

Thanks to StackOverflow I’ve come up with the following solution. Add invisible inputs before and after your modal frame, and modify SimplyModal.js slightly.

So instead of

$.modal("<iframe src='http://www.bing.co.uk' />");

we use

$.modal("<input style='display:none' /><iframe src='http://www.bing.co.uk' /><input style='display:none' />");

This provides two input elements that SimpleModal can detect as they are on your domain. Anything between these two elements is tabbable. However, you also need to edit the following function in jquery.SimpleModal.js to ensure that invisible input elements are detected.

// s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);
s.inputs = $(':input:enabled:first, :input:enabled:last', s.d.data[0]);
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s