使用 mmenu 修复引导模式

Posted 2023-05-08

【中文标题】使用 mmenu 修复引导模式

【英文标题】：Fix Bootstrap Modal with mmenu

【发布时间】：2018-10-13 17:33:41

【问题描述】：

使用 mmenu 时，Bootstrap Modal 在页面顶部加载。

这里是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>

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

【问题讨论】：

css 文件的添加顺序。尝试最后加载 bootstrap.css

模式工作正常你的问题是什么？？？

【参考方案1】：

问题出现是因为——

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

因此，您有一个半屏模式覆盖，并且由于父级可滚动，它会粘在页面顶部

这是由于该父元素的 transform 属性具有 mm-page 和 mm-slideout 类（由插件的css）。请参考这个来解决这个问题css "fixed" child element positions relative to parent element not to the viewport, why?

要解决此问题，您必须从父级中删除 transform 属性（对于打开和折叠的场景），并用 ma​​rgin 替换画布外左菜单工作。

请找到随附的屏幕截图供您参考。在这里，即使您现在向下滚动，模式始终保持在上下文中并且不会粘在页面顶部，因为覆盖现在是整页并且固定位置是相对于文档的。