Twitter bootstrap : 입력 포커스에서 모달 창을 열려면 어떻게해야합니까?

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 속성은 부트 스트랩을 통해 특정 시나리오에서 대화 상자를 자동으로 열 수 없습니다. 좋은 소식은 다른 방식으로이를 달성하는 것이 아주 쉽다는 것입니다.

먼저 텍스트 상자에서 data-* 특성을 제거 할 수 있습니다. 여기서는 해당 특성을 사용하지 않습니다. 그런 다음 jQuery를 사용하여 다음 JavaScript 코드 (jQuery 사용)를 추가하여 대화 상자를 열 수 있습니다.

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