0
我正在使用fullPage.js和Bootstrap模態。Bootstrap模式不能工作function`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>
所以，你需要的模式後，開始工作滾動？即使在您滾動後，我的意思是保留模式？ –
不，我只需要'modal'來顯示，如果'model-body'中的內容太長，就可以滾動。目前，我不能在這個'modal'中滾動。 – vanloc
你可以檢查下面的小提琴鏈接嗎？ –