Question

使用mmenu时，Bootstrap模态会在页面顶部加载。

的链接

这是我在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模态叠加不是相对于文档而是相对于插件的动态创建的父。
由于这个原因，你有一个半屏模式叠加，它粘在页面顶部，因为父级是可滚动的
这是由于此父元素上的转换属性，其中类 mm-page 和 mm-slideout （应用于插件的css）。请参阅此内容以了解此问题css "fixed" child element positions relative to parent element not to the viewport, why?

要解决此问题，您必须从父级删除转换属性（对于打开和折叠方案），并使用 margin 替换关闭 - 扫描左菜单工作。

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

使用mmenu修复Bootstrap模态

1 个答案: