Inline 'position: relative' attribute on .jPanelMenu-panel element interferes with Bootstrap modal

[ryanpsims]

Hi,

It seems like the initial setup of a panel instance interferes with modal z-indexing in Bootstrap.

Bootstrap sets a z-index for the modal, and the semi-opaque div that appears below it at 1050, and 1040 respectively. When jPanel runs, the modal gets included inside of the .jPanelMenu-panel element. However, bootstrap dynamically inserts the semi-opaque 'modal-backdrop' div dynamically at the end of the body. Because of the position relative being applied to the parent of the modal, the modal appears beneath the backdrop.

Specifically if you change the inline style of 'position: relative' applied to the .jPanelMenu-panel to 'position:static', things work as expected.

Got a work around? In an upcoming release could you change the initial setting for position to static?

[SuggeElson]

Thank you ryanpsims for the fix :)

[davidpaulsson]

For those who, like me, Google'd and ended up here it's line 77 in jquery.jpanelmenu.js. Change it to:

panelPosition: 'static',

[eriteric]

Well, slightly different route: I used jRespond to only trigger jpanel at a certain break point and for my purposes that leaves the modal functional. The modal's purpose is duplicated in my jpanel menu, and the modal link is hidden to mobile users - they're always a bit weird on mobile anyways. This also solved an ugly FOUC from jpanel for me.

[mrkhyns]

Just wanted to chime in with another possible solution to this for anyone who ends up here:
I had the same problem using Foundation's modal (Reveal), and the position:static fix didn't help. But in many situations you can simply first close the menu, then manually trigger your modal.

jPM.close();
$("#contactModal").reveal();

[howardgrigg]

panelPosition: 'static' 

fixes this for me but is messes with the opening animation, it just appears. Closing animation still works as expected

[zkwsk]

Note that if you change the js, it seems that you need to reset your browser for the changes to take effect. Don't know why, but I've experienced it twice now.

[acolangelo]

Fixed in pull request #16.

[imteekay]

I'm using the most updated version of JPanelMenu, but my bootstrap modal is not working.
It has the "panelPosition: 'static'" updated.

I also tried something like that:
excludedPanelContent: 'style, script, .modal'
..but no success..

The modal opens proprerly but the modal-backdrop is in front of the modal.

Any thoughts?