alertify upon a bootstrap modal not working

alertify, javascript, twitter-bootstrap

Solution

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/

Problem

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?

Original source