我有 3 个按钮，它们将触发相同的模式，但需要滚动到不同的部分。我正在努力实现这一目标，请帮忙。
<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>
使用模态事件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>
As @Virendra 亚达夫注释，如果模态具有动态高度并且您想要滚动主体，而不是模态中的 div，则替换：-
// 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);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
