模態窗口導致父頁面正文滾動到頂部

Question

我購買了一個主題，並且正在使用模式窗口功能。 有一個按鈕，單擊該按鈕會打開模式窗口。 編碼為：-

<button class="btn btn-modern btn-primary" data-toggle="modal" data-target="#largeModal">
Launch Large Modal
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="largeModalLabel">Large Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         </div>
         <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

您可以在此處測試主題預覽： -https : //preview.oklerthemes.com/porto/7.2.0/elements-modals.html

在頁面中向下滾動，然后單擊“啟動大型模態”。 您會看到在打開和關閉模式窗口時父頁面主體停留在原處

我在網站上使用了完全相同的代碼，即： -http : //mdscomputers.ae/new/solutions.php

請向下滾動，您將看到test1，test2和test3

對於test1，您必須單擊單詞test1以打開模式窗口。 當模式窗口打開時，頁面主體將滾動到頂部。 當您單擊關閉時，父頁面主體將停留在頂部

對於test2，您必須單擊框中的任意位置以打開模式窗口。 發生與test1相同的問題

對於test3，您必須單擊Launch Large Modal按鈕。 父頁面主體將滾動到頂部，但是當我關閉模式窗口時，父頁面主體將向下滾動到該框

這讓我發瘋了:(為什么父頁面正文對我來說滾動到頂部，為什么它只在test3中向下滾動而不在test1和test2中向下滾動？

打開模式窗口時，我需要禁止父頁面主體滾動到頂部

Answer 1

去掉

.modal-open {
     overflow: hidden; 
}

從modal.css第9行

Answer 2

當模態打開時，類modal-open將添加到body元素。

在_modal.scss ，樣式.modal-open { overflow: hidden; } .modal-open { overflow: hidden; }刪除body元素的滾動條。 卸下機身上的滾動條將滾動條推到頂部。

編輯：

custom.css下行添加到您的custom.css ：

.modal-open {
    overflow: initial;
}

Answer 3

對我來說，所有模態都會導致頁面向上滾動。 這是因為在打開模態時，將.modal-open類添加到body 。 此類增加了overflow: hidden; 到身體。 刪除此行或設置為overflow: unset;

這將停止自動滾動到頂部，但是即使模式已打開，也可以滾動。