Bootstrap OKボタンでオートフォーカスしたいモーダル

Question

私はモーダルです。 OKボタンがあります。私はボタンに焦点を当てたい。私はオートフォーカスを試みましたが、それは1秒間焦点を合わせてから離れます。

_Layout.cshtml内のコードは次のとおりです。

<!-- modal that can notify users of errors --> 
<div id="error-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="error-modal" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"> 
        <span aria-hidden="true">&times;</span> 
        <span class="sr-only">Close</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel">Notice</h4> 
      </div> 

      <div class="modal-body"> 
       <ul> 
        <!-- ko foreach: ModalErrors --> 
        <li data-bind="text: $data"></li> 
        <!-- /ko --> 
       </ul> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> 
      </div> 
     </div> 
    </div> 
</div> 

少ないファイル内のコードは次のとおりです。

#error-modal, #info-modal, #action-modal { 
    .modal-dialog { 
     z-index: 1100; 
    } 
    .modal-content { 
     border-radius: 0 4px; 
     //border-radius: 0; 

     ul { 
      padding-left: 20px; 
     } 
    } 
    .modal-footer { 
     button { 
      border-radius: 0; 
     } 
     .btn-primary { 
      background-color: @seal-yellow; 
      border-color: @seal-grey; 
      color: @seal-black; 
     } 
    } 
} 

Answer 1

あなたは、これはそれを行うためのコードをJS使用することができます。

modal = $("#error-modal"); 
modal.find('.btn-primary').focus(); 

このコードにはjQueryが必要です

Answer 2

モーダルをモーダル示すイベントにフックして、画面上に表示された後、あなたが要素を集中することができ、ブートストラップ3を使用している場合：

$('.modal').on('shown.bs.modal', function (e) { 
    // do something... 
}); 

がBoostrap Modal events

Answer 3

を参照してください。私は、ID = "OK-予告ボタンを追加する必要がありました"ボタンのタイプに... javacriptを使用して：

 <div class="modal-footer"> 
      <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> 
     </div> 


$("#error-modal").on('shown.bs.modal', function (event) { 
    $("#ok-notice-button").focus(); 
});