Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked?
For instance, if I click on location 3, I want the dialog box to be centered vertically within the current viewing window. This behavior should apply to 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 text</p>
<button class="close-dialog-btn">Close box </button>
</div>