Twitter 부트 스트랩 병목 스크롤 후 3 입력 모달 블로킹?

Question

이 문제점을 검색했습니다. 그러나 나는 내 문제가 계속이이 질문에

Twitter Bootstrap modal blocks text input field

에 대한 답변을 따랐다.

여기 내 모달 HTML

<div class="modal fade" style="display:none;" id="stockPerLocationModal" data-backdrop="static" ng-app="productInventory" ng-controller="ProductInventoryCtrl"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Stock per location</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <table class=" table responsive shopex-table table-hover no-margin"> 
          <thead> 
           <tr> 
            <th>Outlet Name</th> 
            <th>Stock</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="val in outlets"> 
            <td class="vcenter" ng-model="val.Name"> 
             {{val.Name}} 
            </td> 
            <td> 
             <input type="text" class="form-control" value="{{val.Stock}}" ng-model="val.Stock"> 
            </td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" class="btn btn-red" id="btnSaveProductInventory" ng-click="updateProductInventory()">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

나는 버튼을 클릭 할 때이 모달을 표시하고 있습니다. 여기

은 JS입니다 : 모달가 열려 그러나 때

$('#stockPerLocationModal').on('shown.bs.modal', function() { 
      $(document).off('focusin.modal'); 
     }); 

, 내 입력 필드에 텍스트를 입력 할 수 없습니다 :

function showStockPerLocationModal() { 
     // $("html, body").animate({ scrollTop: 0 }, "fast"); 
     $('#stockPerLocationModal').modal('show'); 
    } 

내가 대답에 설명 된대로 이벤트를 추가했다.

내가 창을 맨 위로 스크롤하면. 효과가있을 것입니다.

그래서이 함수는 showStockPerLocationModal에서 모달을 열기 전에이 코드 줄을 추가했습니다.

$("html, body").animate({ scrollTop: 0 }, "fast"); 

페이지가 트위터 부트 스트랩 3 모달 블록 입력 필드가 스크롤 된 이유는 무엇입니까?

감사합니다.

Answer 1

Z- 색인 및 위치를 확인하십시오. 모달 창의 z- 색인이 페이지의 아래쪽을 향하는 어떤 요소보다 높은 지 확인하십시오. 적용 위치 : 필요한 경우 귀하의 모달에 상대