Twitter Bootstrap滚动botttom后3模态阻止输入字段？

问题描述：

我已经搜索过这个问题。我跟着回答这个问题Twitter Bootstrap滚动botttom后3模态阻止输入字段？

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：

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

我添加为答案所描述的事件：

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

然而，当模式是开放的，我不能在我的输入字段中输入文本。

如果我将窗口滚动到顶部。它会工作。

所以我在打开这个函数showStockPerLocationModal之前添加了这行代码。

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

为什么twitter引导页面滚动后的3个模态块输入字段的任何原因？

谢谢。

你可以使用这个小提琴来重现你的问题：http://jsfiddle.net/robertrozas/540bcohh/ – Hackerman 2014-11-06 14:41:42

它在那里工作。由于没有滚动到底部发生。 – user123456 2014-11-06 14:47:06

由于您使用的是Angular，只需使用http://angular-ui.github.io/bootstrap/ – cvrebert 2014-11-07 00:19:32

答

检查您的z-index和定位。确保模态窗口中的z-index高于页面底部的任何元素。应用位置：相对于你的模态，如果需要

我已经完成并且仍然不适合我。 – user123456 2014-11-09 05:07:13

Twitter Bootstrap滚动botttom后3模态阻止输入字段？

相关推荐