滾動到DIV在引導模式

我有3個按鈕，將觸發相同的模式，但需要滾動到不同的部分。我努力實現這一點，請給予幫助。滾動到DIV在引導模式

<a data-toggle="modal" data-target="#myModal" class="btn-goto-section-1"> Launch modal </a> 
<a data-toggle="modal" data-target="#myModal" class="btn-goto-section-2"> Launch modal </a> 
<a data-toggle="modal" data-target="#myModal" class="btn-goto-section-3"> Launch modal </a> 

<!-- Modal --> 
<div class="modal fade" id="myModal"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <div id="section-1"> 
      ... 
      ... 
      ... 
      ... 
      ... 
     </div> 
     <div id="section-2"> 
      ... 
      ... 
      ... 
      ... 
      ... 
     </div> 
     <div id="section-3"> 
      ... 
      ... 
      ... 
      ... 
      ... 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

來源

2015-11-24 Syed

我想你將不得不將滾動代碼添加到Bootstrap的模態打開回調。 –

你需要滾動模態或整個頁面，因爲如果需要內部模態，那麼模態應該有固定高度 –

@Virendrayadav模態將被動態內容填充，並且不能有固定的高度。 – Syed

使用模式的事件shown.bs.modal，並使用data的部分。打開模式的鏈接可以在event.relatedTarget找到。

在這裏你去： -

$('#myModal').on('shown.bs.modal', function(event) { 
 
    // reset the scroll to top 
 
    $('#myModal .modal-body').scrollTop(0); 
 
    // get the section using data 
 
    var section = $(event.relatedTarget).data('section'); 
 
    // get the top of the section 
 
    var sectionOffset = $('#' + section).offset(); 
 
    //scroll the container 
 
    $('#myModal .modal-body').animate({ 
 
    scrollTop: sectionOffset.top - 30 
 
    }, "slow"); 
 
});

.red, 
 
.green, 
 
.blue { 
 
    height: 300px; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.modal-body { 
 
    max-height: 350px; 
 
    overflow: auto; 
 
} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<a data-toggle="modal" data-target="#myModal" data-section="section-1"> Launch modal </a> 
 
<a data-toggle="modal" data-target="#myModal" data-section="section-2"> Launch modal </a> 
 
<a data-toggle="modal" data-target="#myModal" data-section="section-3"> Launch modal </a> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div id="sdfsd" class="modal-body"> 
 
     <div id="section-1"> 
 
      <h1>section-1</h1> 
 
      <div class="red"></div> 
 
     </div> 
 
     <div id="section-2"> 
 
      <h1>section-2</h1> 
 
      <div class="green"></div> 
 
     </div> 
 
     <div id="section-3"> 
 
      <h1>section-3</h1> 
 
      <div class="blue"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

由於@Virendra亞達夫評論，如果模式有一個動態的高度，要滾動身體，而不是內DIV然後取代： -

// get the top of the section 
var sectionOffset = $('#' + section).offset(); 
//scroll the container 
$('#myModal .modal-body').animate({ 
    scrollTop: sectionOffset.top - 30 
}, "slow");

與

// get the div position 
var position = $('#' + section).position(); 
// scroll modal to position top 
$("#myModal").scrollTop(position.top);

來源

2015-11-24 13:31:24 BenG

BG101你是對的，但他不想修復模式的高度，所以動畫可以在文檔上工作看到我的示例http： //codepen.io/anon/pen/KdLZPx –

我沒有看到關於動態內容的評論，並添加了您的建議。 – BenG

@ BG101對不起，我是如此愚蠢的:)我仍然無法使其工作模態的動態高度。我無法理解您的解決方案，可以通過與您提供的動態高度解決方案混合搭配。 – Syed

這是一個想法。一旦顯示模式滾動（shown.bs.modal）。

$(document).ready(function(){ 
    $('#myModal').on('shown.bs.modal', function (event) { 
     $target = $('#section-3'); 
     $('.modal-body').animate({ 
     scrollTop: $target.offset().top + 'px' 
     }, 'fast'); 

    }); 
});

JS BIN：http://jsbin.com/hagida/3/edit?html,js,output

來源

2015-11-24 13:28:31

滾動到DIV在引導模式

回答

相關問題