Fullpage.js滚动无法在第二模式下运行

时间:2018-12-22 15:23:44

标签: javascript jquery html bootstrap-modal fullpage.js

我有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,
});

0 个答案:

没有答案