如何在當前滾動位置垂直居中對話框

Question

當單擊“顯示對話框”按鈕之一時，如何將對話框垂直居中於窗口的當前滾動位置？

示例：當我單擊位置 3 的底部時。我試圖讓對話框在當前查看窗口屏幕上垂直居中。 所有按鈕都應該如此。

 $('.show-dialog-btn').click(function() { $('#dialog-box').addClass('display-dialog-box'); }); $('.close-dialog-btn').click(function() { $('#dialog-box').removeClass('display-dialog-box'); });

 .locations-container { padding: 10px } .locations-container:not(last-of-type) { margin-bottom: 100px } .locations-container:nth-child(3) { background: #eee } #dialog-box { top: 50%; left: 50%; z-index: 99; display: none; width: 220px; color: #4a4a4a; position: absolute; border-radius: 10px; background: #fff; padding: 10px; transform: translate(-50%, -50%); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 1px 5px 4px rgba(0, 0, 0, 0.1) } #dialog-box.display-dialog-box { display: block }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--- Locations 1 Div ----> <div class="locations-container"> <h2>Locations 1</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p> <button class="show-dialog-btn">Show Dialog</button> </div> <!--- Locations 2 Div ----> <div class="locations-container"> <h2>Locations 2</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p> <button class="show-dialog-btn">Show Dialog</button> </div> <!--- Locations 3 Div ----> <div class="locations-container"> <h2>Locations 3</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p> <button class="show-dialog-btn">Show Dialog</button> </div> <!--- Dialog Box ----> <div id="dialog-box"> <h1>Dialog box</h1> <p>Dialog box text</p> <button class="close-dialog-btn">Close box </button> </div>

Answer 1

只需在#dialog-box中用fixed替換position: absolute ：

 $('.show-dialog-btn').click(function() { $('#dialog-box').addClass('display-dialog-box'); $('body').addClass('disable-scroll'); }); $('.close-dialog-btn').click(function() { $('#dialog-box').removeClass('display-dialog-box'); $('body').removeClass('disable-scroll'); });

 .locations-container { padding: 10px } .locations-container:not(last-of-type) { margin-bottom: 100px } .locations-container:nth-child(3) { background: #eee } #dialog-box { top: 50%; left: 50%; z-index: 99; display: none; width: 220px; color: #4a4a4a; position: fixed; border-radius: 10px; background: #fff; padding: 10px; transform: translate(-50%, -50%); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 1px 5px 4px rgba(0, 0, 0, 0.1) } #dialog-box.display-dialog-box { display: block } body.disable-scroll { overflow: hidden !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--- Locations 1 Div ----> <div class="locations-container"> <h2>Locations 1</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p> <button class="show-dialog-btn">Show Dialog</button> </div> <!--- Locations 2 Div ----> <div class="locations-container"> <h2>Locations 2</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p> <button class="show-dialog-btn">Show Dialog</button> </div> <!--- Locations 3 Div ----> <div class="locations-container"> <h2>Locations 3</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p> <button class="show-dialog-btn">Show Dialog</button> </div> <!--- Dialog Box ----> <div id="dialog-box"> <h1>Dialog box</h1> <p>Dialog box text</p> <button class="close-dialog-btn">Close box </button> </div>