Search code examples
javascriptjqueryhtmlcsscolorbox

Colorbox's tabindex="-1" attribute prevents focus and type on form fields

I've a form which works fine appers above the colorbox modal window and i can show it easly with z-index. When user opens the modal window, form submit and etc are usable but fields can not be focusable for typing.

I know logic is silly; modal overlaps with and modal form (modalception:) but i think this need to be fixed. I've prepared a sample: http://jsfiddle.net/4g3426j2/

html:

<a class="modal-img" href="some-image.jpg">Modal Img</a>

<form>
    <textarea></textarea>
    <input type="text" />
    <input type="submit" />
</form>

css:

form {
    position: relative;
    z-index: 9999;
}
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9998;}

jQuery:

$('.modal-img').colorbox({
    width: '80%',
    height: '80%'
});

And here is output html object from colorbox:

<div id="colorbox" class="" role="dialog" tabindex="-1">...</div>

I've detect when i remove tabindex="-1" attribute from colorbox and everything works fine, is there a healthy way to fix this without touching the plugins javascript or can we remove tabindex from colorbox, what is consequences:?

Solution

  • Setting trapFocus to false fixes the problem, thanks to aik099 on github. 

    $('.modal-img').colorbox({
    width: '80%',
    height: '80%',
    trapFocus: false
});

    Source: https://github.com/jackmoore/colorbox/issues/647#issuecomment-55855910