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


when click on button bootstrap model dialog box shows unclickable no matter do. using bootstrap , 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 modal 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 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 stuck in middle of project..

this due use of css3 translate3d property on fullpage.js wrapper.

i found 3 solutions it:

  • set position of modal fixed , move modal outside plugin's container.
  • use fullpage.js option scrollbar:true, way page scroll in same way normal website (firing scroll event)
  • use css3:false, although way plugin won't work fluid (which more noticeable in mobile devices)

i go 1st solution: usin fixed position modal. can 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

Post a Comment