Как вертикально расположить диалоговое окно по центру в текущей позиции прокрутки

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

Просто замените position: absolute на fixed в #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>