2020年1月7日 02:41:14go评论92阅读模式

英文:

How to vertically center dialog box at the its current scroll position

问题

当点击任何一个"显示对话框"按钮时，我应该如何使对话框在窗口的当前滚动位置垂直居中？

示例：当我点击位置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>

<!--- 位置1 Div ---->
<div class="locations-container">
  <h2>位置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">显示对话框</button>
</div>

<!--- 位置2 Div ---->
<div class="locations-container">
  <h2>位置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">显示对话框</button>
</div>

<!--- 位置3 Div ---->
<div class="locations-container">
  <h2>位置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">显示对话框</button>
</div>

<!--- 对话框 ---->
<div id="dialog-box">
  <h1>对话框</h1>
  <p>对话框文本</p>
  <button class="close-dialog-btn">关闭对话框</button>
</div>

英文:

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.

$(&#39;.show-dialog-btn&#39;).click(function() {

  $(&#39;#dialog-box&#39;).addClass(&#39;display-dialog-box&#39;);
});



$(&#39;.close-dialog-btn&#39;).click(function() {

  $(&#39;#dialog-box&#39;).removeClass(&#39;display-dialog-box&#39;);
});

.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
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;!--- Locations 1 Div ----&gt;
&lt;div class=&quot;locations-container&quot;&gt;
  &lt;h2&gt;Locations 1&lt;/h2&gt;
  &lt;p&gt;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!&lt;/p&gt;

  &lt;button class=&quot;show-dialog-btn&quot;&gt;Show Dialog&lt;/button&gt;
&lt;/div&gt;


&lt;!--- Locations 2 Div ----&gt;
&lt;div class=&quot;locations-container&quot;&gt;
  &lt;h2&gt;Locations 2&lt;/h2&gt;
  &lt;p&gt;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!&lt;/p&gt;

  &lt;button class=&quot;show-dialog-btn&quot;&gt;Show Dialog&lt;/button&gt;
&lt;/div&gt;


&lt;!--- Locations 3 Div ----&gt;
&lt;div class=&quot;locations-container&quot;&gt;
  &lt;h2&gt;Locations 3&lt;/h2&gt;
  &lt;p&gt;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!&lt;/p&gt;

  &lt;button class=&quot;show-dialog-btn&quot;&gt;Show Dialog&lt;/button&gt;
&lt;/div&gt;


&lt;!--- Dialog Box ----&gt;
&lt;div id=&quot;dialog-box&quot;&gt;

  &lt;h1&gt;Dialog box&lt;/h1&gt;
  &lt;p&gt;Dialog box text&lt;/p&gt;
  &lt;button class=&quot;close-dialog-btn&quot;&gt;Close box &lt;/button&gt;
&lt;/div&gt;

答案1

得分: 1

只需在#dialog-box中将position: absolute替换为fixed：

#dialog-box {
  top: 50%;
  left: 50%;
  z-index: 99;
  display: none;
  width: 220px;
  color: #4a4a4a;
  position: fixed; /* 将此行的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);
}

英文:

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

$(&#39;.show-dialog-btn&#39;).click(function() {

  $(&#39;#dialog-box&#39;).addClass(&#39;display-dialog-box&#39;);
  $(&#39;body&#39;).addClass(&#39;disable-scroll&#39;);
});



$(&#39;.close-dialog-btn&#39;).click(function() {

  $(&#39;#dialog-box&#39;).removeClass(&#39;display-dialog-box&#39;);
  $(&#39;body&#39;).removeClass(&#39;disable-scroll&#39;);
});

.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;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;!--- Locations 1 Div ----&gt;
&lt;div class=&quot;locations-container&quot;&gt;
  &lt;h2&gt;Locations 1&lt;/h2&gt;
  &lt;p&gt;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!&lt;/p&gt;

  &lt;button class=&quot;show-dialog-btn&quot;&gt;Show Dialog&lt;/button&gt;
&lt;/div&gt;


&lt;!--- Locations 2 Div ----&gt;
&lt;div class=&quot;locations-container&quot;&gt;
  &lt;h2&gt;Locations 2&lt;/h2&gt;
  &lt;p&gt;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!&lt;/p&gt;

  &lt;button class=&quot;show-dialog-btn&quot;&gt;Show Dialog&lt;/button&gt;
&lt;/div&gt;


&lt;!--- Locations 3 Div ----&gt;
&lt;div class=&quot;locations-container&quot;&gt;
  &lt;h2&gt;Locations 3&lt;/h2&gt;
  &lt;p&gt;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!&lt;/p&gt;

  &lt;button class=&quot;show-dialog-btn&quot;&gt;Show Dialog&lt;/button&gt;
&lt;/div&gt;


&lt;!--- Dialog Box ----&gt;
&lt;div id=&quot;dialog-box&quot;&gt;

  &lt;h1&gt;Dialog box&lt;/h1&gt;
  &lt;p&gt;Dialog box text&lt;/p&gt;
  &lt;button class=&quot;close-dialog-btn&quot;&gt;Close box &lt;/button&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

How do I assign a type to an array of tuples whose entries may vary between tuples?

Plotly.js Sunburst图表状态变化确定

在本地存储中持续检查一个函数是否返回true。

Typescript – 如何导入和使用 fetch 的 RequestInit 类型？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论