It sounds like a modal isn’t the right solution to your problem here.
A modal dialog by definition shouldn’t allow the user to interact with anything below it.
In user interface design, a modal window is a child window that
requires users to interact with it before they can return to operating
the parent application, thus preventing the workflow on the
application main window.
That being said, there is a way to get around it. Bootstrap sets up an event listener to steal focus from everything else, and that’s what’s stopping you from editing the text input. The other buttons work because they don’t require focus, only a click event.
You can listen for the ‘shown’ event that the bootstrap modal triggers, and disable the focus listener it sets.
$('#myModal').on('shown', function() {
$(document).off('focusin.modal');
});
And just for fun: http://jsfiddle.net/Jxdd8/4/