Modal Scroll Sorunu
-
merhaba, modal yapmaya çalışıyorum fakat modal açıldığında bile scroll aşağı yukarı hareket edebiliyor. bu sorunu nasıl çözebilirim.
modal.min.css
.modals, .modals *, .modals *:before, .modals *:after { box-sizing: border-box; } .modals { align-items: center; background-color: rgba(0, 0, 0, 0.7); bottom: 0; display: none; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 999; } .modals-shown { display: flex; } .modal { background: #fff; border-radius: 3px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); display: none; flex-direction: column; max-height: 90%; overflow: auto; position: relative; right: 0; width: 90%; } .modal-shown { display: flex; } .modal-header { border-bottom: 1px solid #ddd; flex-grow: 0; flex-shrink: 0; overflow: hidden; padding: 12px 22px; position: relative; width: 100%; } .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5 { margin: 0; } .modal-footer { border-top: 1px solid #ddd; overflow: hidden; padding: 16px; } .modal-content { padding: 16px 24px; } .modal-small { max-width: 400px; } .modal-medium { max-width: 600px; } .modal-scrollable .modal-content { overflow-y: auto; } .modal-close { background-image: url("img/close.svg"); background-position: center center; background-repeat: no-repeat; background-size: 25px 25px; cursor: pointer; height: 35px; margin: 7px; opacity: 0.3; padding: 10px; position: absolute; right: 0; top: 0; width: 35px; } .modal-close:hover { background-color: #ddd; opacity: 0.5; }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript" charset="utf-8" src="bp-modal.min.js"></script> <link rel="stylesheet" href="modal.min.css" type="text/css" media="all" /> </head> <body> <p data-modal="test" style="text-align:center">Click me!</p> <div class="modals" style="overflow: hidden;"> <div id="test" class="modal modal-medium modal-closeable"> <div class="modal-header"> <h2>This is a Medium-Sized Modal</h2> </div> <div class="modal-content"> <p> This modal includes the class <code>modal-closable</code> which adds the fancy close button at the top right. </p> </div> </div> </div> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> This modal includes the class <br><br><br> </body> </html>
-
Modalın belirli bir yüksekliğe sahip olmasını sağlayabilirsin. İçerik o yükseklikten fazla olabilir o nedenle modal içerik kısmında overflow-y:scroll yapıp içeriği scrol ile gösterirsin.
-
-
body:has(.modals-shown) { overflow: hidden; }
-
wert bunu yazdı
body:has(.modals-shown) { overflow: hidden; }
https://jsfiddle.net/9nw4t7xz/
hocam denedim fakat olmadı. bakabilir misiniz.
-
wert bunu yazdı
body:has(.modals-shown) { overflow: hidden; }
yukarı yazınca düzeldi teşekkürler.