alertify upon a bootstrap modal not working

Question

I have a modal with a button 'open prompt':

<div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Arquivo</h4>
            </div>
            <div class="modal-body">
                <a href="javascript:my_prompt();" class="button">Open prompt</a>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

And the my_prompt function:

function my_prompt()
{
    alertify.prompt( 'Prompt', function (e, str) {}, "" );
}

When I show the modal with $('#test').modal('show'); and click to open the prompt, they both appears, but the alertify can not be edited. And if I press ESC key, they both disappear.

Anybody had this problem too? Is there a solution?

Answer 1

The issue is related to the presence of tabindex="-1" in your modal div.

By removing it will work fine, I'm searching for side effects, but for now I have found any issue.

Demo: http://jsfiddle.net/IrvinDominin/PC7k4/2/