使用 fullPage.js 时无法单击 Bootstrap 模型对话框

Question

当我单击按钮时，会显示一个 Bootstrap 模型对话框 ，但无论我做什么都无法单击。我正在使用 Bootstrap 和 fullPage.js

<body>
<div id="fullpage">
 <div class="section">
 <div class="container">
  <h1> First Page</h1>
</div>
</div>
<div class="section">
<div class="container">
  <h1>Modal Example</h1>

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog" style="position:relative;">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>
</div>
</div>
</body>

脚本

<script type="text/javascript">
$(document).ready(function() {
 $('#fullpage').fullpage(
{
  sectionsColor: ['#f2f2f2', '#4BBF33']
});
});
 </script>

请帮助我卡在项目中..

Answer 1

这是由于在 fullpage.js 包装器上使用了 css3 translate3d 属性。

我找到了 3 个解决方案：

将模态框的位置设置为 fixed 并将模态框移出插件容器。
使用 fullpage.js 选项 scrollBar:true，这样页面将以与普通网站相同的方式滚动（触发滚动事件）
使用 css3:false，尽管这样插件将无法正常工作（这在移动设备中更为明显）

我会选择第一个解决方案：使用模态的固定位置。你可以用 CSS:

.fp-enabled .modal{
   position:fixed !important;
}

HTML

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">....</div>
    <div class="section">Some section</div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        ...
    </div>
</div>

Example online

Answer 2

尝试：

<div class="modal">...</div>

<div id="fullpage">
     <div class="section">...</div>
     <div class="section">...</div>
     <div class="section">...</div>
</div>

模态元素不必在整页的这么多子元素中定义（整页class）。
他必须是同级（整页class）或上级

@来源：https://github.com/alvarotrigo/fullPage.js/issues/192#issuecomment-40346380

使用 fullPage.js 时无法单击 Bootstrap 模型对话框

Unable to click on Bootstrap model dialog while using fullPage.js

javascript

css

jquery

twitter-bootstrap

fullpage.js