Boostrap模態元素偏移量爲零

要滾動到我的Bootstrap模式中的元素，我可以檢查元素的偏移量。例如有8個div，每個都有自己的id（＃row-1，＃row-2等）。如果我打開模式，然後將下列內容輸入到控制檯中，我會得到正確的偏移值。Boostrap模態元素偏移量爲零

$('#row-6').offset()['top'];

但是當我console.log到代碼本身這一點，與.modal('show')開模後，我得到0回來。

這種差異會如何發生？我嘗試了所有我能找到的解決方案，但所有的解決方案都給了我相同的0。

我的問題也可以解決，如果我可以通過JavaScript以任何其他方式滾動到元素。

來源

2015-09-20 B_s

您必須等待模式中顯示：

// The modal is shown 
    $('#yourModal').on('shown.bs.modal', function() { 
     // Get the right offset 
     var offset = $("#yourelement").offset(); 
     var offsetTop = offset.top; 
     var offsetLeft = offset.left; 
    });

來源

2017-06-06 06:11:00

謝謝，近兩年來問這個後問題已回答！ –

謝謝我使用的位置，這是15,15 ...抵消作品。 – Andy

我的猜測是，爲了給你正確的價值，元素還沒有顯示出來嗎？嘗試使用的setTimeout來驗證這一點：

setTimeout(function(){ $('#row-6').offset()['top']; }, 3000);

來源

2015-09-20 21:42:52

你說：如果我能滾動的元素在與JavaScript的任何其他方式

我的問題也將得到解決。

所以，這裏是我的建議，你的問題：

HTML：

<button id="modal_show" class="btn btn-warning">Show modal</button> 
<div id="myModal" class="modal modal-flex fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:60px;"> 
    <div class="modal-dialog"> 
     <div class="modal-content" style="padding:5px;"> 
      <div class="modal-body"> 
       <div class="row" id="row1"> 
        <div class="col-xs-12"> 
         <p> 
          This is row 1 
         </p> 
        </div> 
       </div> 
       <div class="row" id="row2"> 
        <div class="col-xs-12"> 
         <p> 
          This is row 2 
         </p> 
        </div> 
       </div> 
       <div class="row" id="row3"> 
        <div class="col-xs-12"> 
         <p> 
          This is row 3 
         </p> 
        </div> 
       </div> 
       <div class="row" id="row4"> 
        <div class="col-xs-12"> 
         <p> 
          This is row 4 
         </p> 
        </div> 
       </div> 
       <div class="row" id="row5"> 
        <div class="col-xs-12"> 
         <p> 
          This is row 5 
         </p> 
        </div> 
       </div> 
       <div class="row" id="row6"> 
        <div class="col-xs-12"> 
         <p> 
          This is row 6 
         </p> 
        </div> 
       </div> 
       <div class="row" id="row7"> 
        <div class="col-xs-6"> 
         <p> 
          This is row 7 
         </p> 
        </div> 
        <div class="col-xs-6"> 
         <p class="pull-right"> 
          <span class="scroller" data-to="3">Go To 3</span> 
         </p> 
        </div> 
       </div> 
       <div class="row" id="row8"> 
        <div class="col-xs-6"> 
         <p> 
          This is row 8 
         </p> 
        </div> 
        <div class="col-xs-6"> 
         <p class="pull-right"> 
          <span class="scroller" data-to="2">Go To 2</span> 
         </p> 
        </div> 
       </div> 

      </div> 
      <div class="modal-footer"> 
       <div class="row"> 
        <div class="col-xs-12 pull-right"> 
         <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div>

的Jquery：

$('#modal_show').on('click', function(){ 
    $('#myModal').modal({show: true}); 
}); 

$('.scroller').click(function(){ 
    var targetId = $(this).attr("data-to"); 
    $('#myModal').animate({ 
     scrollTop: $("#row"+targetId).position().top 
    }, 1000); 
});

和一些CSS：

.row { 
    min-height:100px; 
} 
.scroller { 
    cursor:pointer; 
    text-decoration:underline; 
}

當您向下滾動到div的7和8時，您會注意到分別向上滾動到div＃3和＃2的鏈接。

工作小提琴：http://jsfiddle.net/xL9at8sc/

希望幫助你和其他人...

來源

2015-09-20 21:43:22

Boostrap模態元素偏移量爲零

回答

相關問題