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]);