Question

我正在使用bootstrap模式。问题是当我试图专注于textarea时，模态消失了。

这是我的代码：

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title" id="myModalLabel">Secret #<?php echo $counter; ?></h4>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <form method="post" action="">
                        <div class="form-group">
                            <textarea id="comment" name="comment" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button name="comment" type="submit" class="btn btn-primary">Comment</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Answer 1

所以，我已经通过阻止评论框的触发事件来解决这个问题：

    $( ".modal form #comment" ).click(function( event ) {
      event.stopPropagation();

    });

Answer 2

我把模型放在一切之上，为我解决了。

<body>
   <form>
     <div class="modal fade" ... >

当焦点在textarea上时，Bootstrap模态关闭

2 个答案: