Question

我正在使用bootstrap 3，我想在用户专注于输入框时打开一个模态窗口。我怎么能这样做？

<form>

<input type="text"  id="openmodalOnfocus" data-toggle="modal" data-target="myModal">

</form>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <div class="row">
          <div class=" col-md-4">
            lorem i[p sum on left
         </div>

          <div class=" col-md-4">
            lorem ipsom on right
         </div>
      </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Answer 1

data-toggle属性不能用于通过Bootstrap自动打开特定方案中的对话框。好消息是以另一种方式实现这一目标非常容易。

首先，您可以从文本框中删除data-*属性，因为它们在此处不可用;然后，您可以通过添加以下javascript代码（使用jQuery）打开焦点对话框：

$(function() {
    $('#myModal').focus(function() {
        $(this).modal('show');
    });
});

Twitter bootstrap：如何在输入焦点上打开模态窗口？

1 个答案: