Alibh Alibh - 6 months ago 47
Javascript Question

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

When I click on the button a Bootstrap model dialog box shows but it is unclickable no matter what I do.
I am using Bootstrap and fullPage.js

http://codepen.io/anon/pen/obEOzO

<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

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


Please help i am stuck in the middle of a project..

Answer

This is due to the use of the css3 translate3d property over the fullpage.js wrapper.

I found 3 solutions for it:

  • Set the position of the modal to fixed and move the modal outside the plugin's container.
  • Use the fullpage.js option scrollBar:true, this way the page will scroll in the same way a normal website does (firing the scroll event)
  • Use css3:false, although this way the plugin won't work as fluid (which is even more noticeable in mobile devices)

I would go for the 1st solution: usin a fixed position for the modal. You can do it with 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

Comments