jPanelMenu ruins the background of Bootstrap

[PhilipAnd]

When enabling jPanelMenu the overlay doesn't work. When the overlay is open it will have the background color rest on top of the whole page.

To better explain the issue, I have created this fiddle: http://jsfiddle.net/tDGrn/3/

If you comment out jPM.on() it works.

[KevinCocquyt39]

Having the same issue when the Twitter Bootstrap Modal is used. The overlay appears on top of everything (including the modal itself).

[3nki]

i had something similar and fixed it by setting animated: false. it was creating an overlay layer that would stick around even when the menu/panel was closed.

[regenrek]

Having the same issue when the Twitter Bootstrap Modal is used. The overlay appears on top of everything (including the modal itself).

The Modal needs to be outside the Panel.
Try the following (worked for me)

    var jPM = $.jPanelMenu({
        excludedPanelContent: 'style, script, .modal'
    });

https://github.com/acolangelo/jPanelMenu#options-excludedPanelContent

[paul-wolf]

It looks like excludedPanelContent only works on children - not all descendants - of body.
Therefore, @regenrek's solution only works provided the modal markup is directly beneath the body element. So, $("body > .modal") has to be able to select the markup.

[acolangelo]

Fixed with #16 and #59.

[rodrigoAbril]

Hi guys, If anyone still has this problem

Explanation:
The actual bug is related to how fixed position works different on elements affected by translate3d, this causes all fixed elements like the modal to misbehave . (see http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue)

-as support for fixed elements was removed you can try manually removing the style property from element.jPanelMenu-panel while the modal is opened.

Fix:

.modal-open .jPanelMenu-panel {
    position:static!important;
    -webkit-transform:none!important;
    transform:none!important;
}

(Edited after reading that the plugin dropped fixed position support)