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

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 中的 position: absolute 替换为 fixed 即可:

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