0
私はfullPage.jsとBootstrapモーダルを扱っています。ブートストラップモーダル機能が動作しません。「scroll」with fullPage.js
Bootstrapモーダルでコンテンツをスクロールするときに問題があります。
Bootstrapモーダルで作成したポップアップでスクロールできません。または、Bootstrapモーダルで作成されたUIと対話します。 fullPage.jsを破棄する関数を追加しても、その中のコンテンツはスクロールできません。 通常、私のコードは正しく動作しますが、fullPage.jsでは動作していないようです。
あなたは私のコードでhttp://jsfiddle.net/6SQhb/496/
または直接に私のコードを見ることができます：
ここvar slideTimeout;
$('#fullpage').fullpage({
sectionsColor: ['#ccc', '#999'],
anchors: ['home', 'about'],
animateAnchor: false,
menu: '.nav',
paddingTop: '50px',
verticalCentered: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
css3: true,
afterRender: function() {
//on page load, start the slideshow
setTimeout(function() {
$.fn.fullpage.moveTo(1, 0);
}, 1000);
},
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
if (anchorLink == 'home') {
//make the slideshow automatically go!
slideTimeout = setTimeout(function() {
$.fn.fullpage.moveTo(1, slideIndex + 1);
}, 1000);
//if you are at the last slide
//then cycle back to the first
if (slideIndex == 2) {
slideTimeout = setTimeout(function() {
$.fn.fullpage.moveTo(1, 0);
}, 1000);
}
}
},
onLeave: function (index, direction) {
//after leaving section 1 (home) and going anywhere else, whether scrolling down to next section or clicking a nav link, this SHOULD stop the slideshow and allow you to navigate the site...but it does not
if (index == '1') {
console.log('on leaving the slideshow/section1');
clearInterval(slideTimeout);
}
}
});
//$(document).on('click', '.clickme', function(){
//$.fn.fullpage.destroy('all');
//});.modal-backdrop {
background-color: transparent !important;
}
.modal-dialog{
overflow-y: initial !important;
}
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
.slideOne {
background-color:#99CCFF;
}
.slideTwo {
background-color:#FF66FF;
}
.slideThree {
background-color:#00CC99;
}
#header {
width: 100%;
background-color: #42403c;
background: rgba(0, 0, 0, 0.7);
position: fixed;
height: 50px;
top: 0;
z-index: 99;
}
.nav li {
display:inline;
}
.nav li a {
color: #FFF;
font-size: 16px;
text-decoration: none;
}
.nav li a:hover {
color: #69b744;
}<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<header id="header">
<ul class="nav">
<li data-menuanchor="home"> <a href="#home">home</a>
</li>
<li data-menuanchor="about"><a href="#about">about</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="section0">
<br><br><br><br><br>
<a class="clickme" href="javascript:void(0,0)" data-toggle="modal" data-target="#myModal">Click me </a>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end modal -->
</div>
<div class="section" id="section1">second section</div>
</div>
だから、後に動作するモーダルを必要としますスクロール？あなたがスクロールした後でもモーダルを維持することを意味しますか？ –
いいえ、表示するには 'モーダル'のみが必要で、 'モデル本体 'の内容が長すぎる場合はスクロールできます。現在、このモーダルではスクロールできません。 – vanloc
以下のフィドルリンクを確認できますか？ –