Fix Bootstrap Modal with mmenu

Question

Bootstrap Modal loads at top of the page while using mmenu.

here is the link for mmenu MMenu Link

First Image Second Image

here is my code modal added in mmenu.

    <div id="page">
    <div class="header">
        <a href="#menu"><span></span></a>
        Demo
    </div>
    <div class="content">       
    </div>
    <nav id="menu">
        <div id="panel-menu">
            <ul>
                <li><a href="#/">Home</a></li>
                <li>
                    <span>About us</span>
                    <ul>
                        <li><a href="#/">History</a></li>
                        <li>
                            <span>The team</span>
                            <ul>
                                <li><a href="#/">Management</a></li>
                                <li><a href="#/">Sales</a></li>
                                <li><a href="#/">Development</a></li>
                            </ul>
                        </li>
                        <li><a href="#/">Our address</a></li>
                    </ul>
                </li>                
            </ul>
        </div>

        <div id="panel-account">            
        </div>

        <div id="panel-cart">            
        </div>
    </nav>
    <button type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#full-width-modal">Full width Modal</button>
</div>
<div id="full-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="full-width-modalLabel" aria-hidden="true" style="display: none;background:rgba(0,0,0,.5)" data-backdrop="false">
    <div class="modal-dialog modal-full">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title mt-0">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
            </div>
        </div>
    </div>
</div>

When the modal pops up, it sticks on top of the page. how can i solve this problem ?

Answer 1

The problem is arising because -

• Bootstrap modal overlay which has position fixed is not being relative to the document but to the dynamically created parent of the plugin.

• Due to this, you have a half screen modal overlay and it is sticking to the top of the page as the parent is scrollable

• This is due to the transform property on this parent element with classes mm-page and mm-slideout (applied by the plugin's css). Please refer this to get a hang of this problem css "fixed" child element positions relative to parent element not to the viewport, why?

To fix this, you'll have to remove the transform properties from the parent(for both open and collapsed scenarios) and replace with margin for the off-canvas left menu to work.

Please find the attached screenshot for your reference. Here even if you scroll down now the modal always remains in context and does not stick to the top of the page as the overlay is now full-page and position fixed is relative to the document.