Fullpage.js: Knowing issue with Bootstrap 3 Modal?

[hughred22]

Hi,

Here is the demo page: http://hughdesign.net/radco-v2/home-2.html
Click the buy button will call a BS Modal window. You can see the window is on top right of the page under the dark bg overlay. And the overlay is unclickable and can not be closed :(

How to address the code to make this AWESOME AWESOME plug-in work with Bootstrap Modal (since my entire site is power by Bootstrap)

[MediaCarbon]

Use CSS to give your modal a higher z-order?

Chris Leeds
MediaCarbon, Inc.
(Text/Mobile) 347-4CARBON | 347-422-7266tel:[phone] (Toll-free) 800-591-5160tel:[phone]
(FB) http://Facebook.com/ChrisLeeds/
(Skype) ChristianLeeds

-----Original message-----
From: Hugh Hou [email protected]
To: "alvarotrigo/fullPage.js" fullPage.[email protected]
Sent: Fri, Jan 24, 2014 02:06:30 GMT+00:00
Subject: [fullPage.js] Knowing issue with Bootstrap 3 Modal? (#192)

Hi,

Here is the demo page: http://hughdesign.net/radco-v2/home-2.html
Click the buy button will call a BS Modal window. You can see the window is on top right of the page under the dark bg overlay. And the overlay is unclickable and can not be closed :(

How to address the code to make this AWESOME AWESOME plug-in work with Bootstrap Modal (since my entire site is power by Bootstrap)

—
Reply to this email directly or view it on GitHubhttps://github.com/alvarotrigo/fullPage.js/issues/192.

[alvarotrigo]

No idea what it can be, but it doesn't seem to be related with fullpage.js.

Have you already asked in http://stackoverflow.com/ with the css tag?

[hughred22]

Okay. I disable the css3:true option and the modal work now... But why is that? I want to use CSS3 with hardware acceleration with all the animation... any direction you can point me to have the best of both world?

[MediaCarbon]

While I'm no JavaScript programmer I've done HTML and CSS work since before the turn of the century.
I've never seen a stacking order issue that couldn't be solved by altering the z-order.

Chris Leeds
MediaCarbon, Inc.
(Text/Mobile) 347-4CARBON | 347-422-7266tel:[phone] (Toll-free) 800-591-5160tel:[phone]
(FB) http://Facebook.com/ChrisLeeds/
(Skype) ChristianLeeds

-----Original message-----
From: Hugh Hou [email protected]
To: "alvarotrigo/fullPage.js" fullPage.[email protected]
Cc: "Christian Leeds | MediaCarbon, Inc." [email protected]
Sent: Fri, Jan 24, 2014 18:55:17 GMT+00:00
Subject: Re: [fullPage.js] Knowing issue with Bootstrap 3 Modal? (#192)

Okay. I disable the css3:true option and the modal work now... But why is that? I want to use CSS3 with hardware acceleration with all the animation... any direction you can point me to have the best of both world?

—
Reply to this email directly or view it on GitHubhttps://github.com/alvarotrigo/fullPage.js/issues/192#issuecomment-33250334.

[guywithabeard]

Like @MediaCarbon said, it's most likely a z-index 'conflict' between Bootstrap and fullPage.

Try to force a new z-index for the modal window with a CSS override and see if that works with css3: true

[alvarotrigo]

css3:true adds the property translate3d to the body. It sounds like a bug with Chrome:
http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d

[thuhn]

I had the same problem an got it working by disabling the backdrop in the Twitter Bootstrap Modal settings. So the problem is not the modal itself, but only the backdrop.

Example:

      $('#videoModal').modal({
            show: true,
            keyboard: true,
            backdrop: false
        });

[luislizarraga]

I know this issue has been closed for some time, but I solved it without disabling the backdrop on the modal, you just add .modal as a fixed element like:

fixedElements: '.navbar, .modal'

[alvarotrigo]

@luislizarraga the option fixedElements is no longer needed if you are using fullPage.js 2.X and you place those elements outside the sections wrap.

You can see the source code of a live example here.

Basically:

$('#fullpage').fullpage();

With this HTML markup:

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

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

[sbellver]

Same here. I need disable css3:true or modal it's not showed :(