如何在当前滚动位置垂直居中对话框

Question

How would I be able to vertically center the dialog box at its current scroll position of the window when either one of the "show dialog" buttons is clicked?

Example: When I click the bottom on locations 3. I'm trying to get the dialog box to be vertically centered at that current viewing window screen. And this should be the case for all buttons.

 $('.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

Just replace position: absolute with fixed in #dialog-box :

 $('.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>