Исправить Bootstrap Modal с помощью меню

Question

Bootstrap Modal загружается вверху страницы при использовании mmenu.

вот ссылка для меню MMenu Ссылка

Первое изображение Второе изображение

вот мой модальный код, добавленный в 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 «фиксированные» позиции дочерних элементов относительно родительского элемента, а не области просмотра, почему?

Чтобы это исправить, вам нужно удалить свойства transform из родительского объекта (для открытого и свернутого сценариев) и заменить на margin для левого меню вне холста. работать.

Пожалуйста, найдите прикрепленный скриншот для справки. Здесь, даже если вы сейчас прокрутите вниз, модальное всегда остается в контексте и не прилипает к верхней части страницы, так как оверлей теперь полностраничный, а фиксированная позиция относительно документа.