Twitter引導程序：如何打開輸入焦點上的模式窗口？

Question

我正在使用引導程序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'); 
    }); 
});