I’ve been using Eric Martin’s brilliant SimpleModal jQuery plugin for a couple of weeks now and am loving it’s simplicity.
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' />");
$.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); s.inputs = $(':input:enabled:first, :input:enabled:last', s.d.data);