javascript - 使用 mmenu 修复 Bootstrap Modal

Question

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

这是 mmenu MMenu Link 的链接

First Image Second Image

这是我在 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>

当模式弹出时，它会停留在页面顶部。我该如何解决这个问题？

Answer 1

出现这个问题是因为-

• 位置固定的 Bootstrap 模式覆盖不是相对于文档而是相对于插件的动态创建的父级。

• 因此，您有一个半屏模态叠加层，并且它会粘在页面顶部，因为父级是可滚动的

• 这是由于此父元素上的 transform 属性，类为 mm-page 和 mm-slideout(由插件的 css)。请引用此以解决此问题 css "fixed" child element positions relative to parent element not to the viewport, why?

要解决此问题，您必须从父项中删除 transform 属性(对于打开和折叠的情况)并替换为 off-canvas 的 ma​​rgin左菜单工作。

请查看随附的屏幕截图以供引用。在这里，即使您现在向下滚动，模态框也始终保留在上下文中并且不会停留在页面顶部，因为覆盖现在是整页并且固定位置是相对于文档的。