I have 3 buttons that will trigger same modal but need to scroll to different sections. I am struggling to achieve this, kindly help.
<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>
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class. Save this answer.
Use the . modal-dialog-scrollable class to enable scrolling inside the modal.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Use the modal event shown.bs.modal
and use data
for the section. The link which opened the modal can be found at event.relatedTarget
.
Here you go:-
$('#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>
As @Virendra yadav comment, if the modal has a dynamic height and you want to scroll the body, and not a div within the modal, then replace:-
// get the top of the section
var sectionOffset = $('#' + section).offset();
//scroll the container
$('#myModal .modal-body').animate({
scrollTop: sectionOffset.top - 30
}, "slow");
with
// get the div position
var position = $('#' + section).position();
// scroll modal to position top
$("#myModal").scrollTop(position.top);
Here is one idea. Make the modal scroll once it is shown (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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With