在Bootstrap模式中滚动到DIV [英] Scroll to DIV with in the Bootstrap Modal
本文介绍了在Bootstrap模式中滚动到DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有3个按钮,将触发相同的模式,但需要滚动到不同的部分.我正在努力实现这一目标,请帮忙.
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>
推荐答案
使用模式事件shown.bs.modal
,并对该部分使用data
.可以在event.relatedTarget
中找到打开模态的链接.
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
.
您在这里:-
$('#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 yadav 注释所示,如果模态具有动态高度,并且您要滚动正文,而不是模态内的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");
使用
// get the div position
var position = $('#' + section).position();
// scroll modal to position top
$("#myModal").scrollTop(position.top);
这篇关于在Bootstrap模式中滚动到DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文