我有2个按钮用于2个不同的模态,我在这些模态中添加了fullpage.js。在第一个模式中一切正常,但在第二个模式中fullpage.js滚动不起作用,即使水平幻灯片导航箭头也没有出现
用于触发引导程序模式的按钮
<button type="button" class="btn btn-info btn-lg" data-
toggle="modal" data-target="#myModal">Open Modal1</button>
<button type="button" id="open" class="btn btn-info btn-lg" data-
toggle="modal" data-target="#myModal1">Open Modal2</button>
其中包含fullpage.js的引导程序模式
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" id="close" tabindex="0" class="close" data-
dismiss="modal"><img src="cancel.png"></button>
</div>
<div class="modal-body">
<div id="fullpage">
<div class="section active" id="section0">
<div class="slide active" id="slide1">
<img class="header" src="header1.jpg">
</div>
<div class="slide" id="slide2">
<img src="plan8/slide2.svg">
</div>
<div class="slide" id="slide3">
<img src="plan8/slide3.svg">
</div>
</div>
<div class="section" id="section1">
<div class="content-cont">
<h1></h1>
<p></p>
</div>
<div class="image-cont">
<img src="plan8.png">
</div>
</div>
<div class="section" id="section2">
</div>
</div>
</div>
</div>
</div>
Modal2(模态不滚动)
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" id="close" tabindex="0" class="close" data-
dismiss="modal"><img src="cancel.png"></button>
</div>
<div class="modal-body">
<div id="fullpage1">
<div class="section active" id="section0">
<div class="slide active" id="slide1">
<img class="header" src="header1.jpg">
</div>
<div class="slide" id="slide2">
<img src="plan8/slide2.svg">
</div>
<div class="slide" id="slide3">
<img src="plan8/slide3.svg">
</div>
</div>
<div class="section" id="section1">
<div class="content-cont">
<h1></h1>
<p></p>
</div>
<div class="image-cont">
<img src="plan8.png">
</div>
</div>
<div class="section" id="section2">
</div>
</div>
</div>
</div>
</div>
Modal1的Java代码
var myFullpage = new fullpage('#fullpage', {
sectionsColor: ['#ffffff', '#ffffff', '#19B6D3;', '#ffffff',
'#ffffff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage',
'lastPage'],
lazyLoad: true,
loopHorizontal:false,
});
Modal2的Javascript代码
var myFullpage1 = new fullpage('#fullpage1', {
sectionsColor: ['#ffffff', '#ffffff', '#19B6D3;', '#ffffff',
'#ffffff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage',
'lastPage'],
lazyLoad: true,
loopHorizontal:false,
});