Question

我正在尝试创建一个弹出窗口，该弹出窗口相对于被单击的链接定位。我的代码当前正在执行此操作，但是在触发弹出窗口的链接和叠加层本身的顶部/底部都有多余的空格。我要删除此多余的空白。

我在链接和叠加层均添加了边框，以帮助您直观地查看问题。

我尝试将链接和叠加层设置为内联块。

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  margin-top: 200px;
}

.box {
  border: 1px solid black;
}

.overlay {
  position: relative;
  top: -20px;
  left: 20px;
  border: 1px solid red;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #dff9fb;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.close {
  position: absolute;
  top: 16px;
  right: 30px;
}

<div class="box">
  <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Endling #1</h2>
    <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/648742508&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
    <a class="close" href="#">&times;</a>
  </div>
</div>

我想删除链接（“框”类）和覆盖（“ overlay”）类的顶部/底部的多余空白。我希望叠加层的位置相对于被单击的链接保持不变。

Answer 1

从弹出窗口中删除顶部/底部边距，并在框上设置固定高度。

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  margin-top: 200px;
}

.box {
  border: 1px solid black;
  height: 40px
}

.overlay {
  position: relative;
  top: -20px;
  left: 20px;
  border: 1px solid red;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: auto;
  padding: 20px;
  background: #dff9fb;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.close {
  position: absolute;
  top: 16px;
  right: 30px;
}

<div class="box">
  <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Endling #1</h2>
    <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/648742508&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
    <a class="close" href="#">&times;</a>
  </div>
</div>

Answer 2

只需注释掉弹出窗口类中的空白。

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  margin-top: 200px;
}

.box {
  border: 1px solid black;
}

.overlay {
  position: relative;
  top: -20px;
  left: 20px;
  border: 1px solid red;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
/*   margin: 70px auto; */ 
  padding: 20px;
  background: #dff9fb;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.close {
  position: absolute;
  top: 16px;
  right: 30px;
}

<div class="box">
  <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Endling #1</h2>
    <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/648742508&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
    <a class="close" href="#">&times;</a>
  </div>
</div>

Answer 3

您使用flex来对齐项目，默认情况下，子元素将尝试增长到父级（弹性容器）的高度和宽度。

要解决此问题，您可以使用justify-content来控制水平空间的分布方式（您已经在使用此功能），并且可以使用align-items来垂直控制间距（{ {1}}元素具有原始大小。

此外，您还要同时指定.box和75px top的{{1}}，这会导致bottom元素中的间距。

在margin上设置了.overlay，其中margin-top会引起滚动，当我认为时，它仍在以下代码段中与您的问题无关。

因此，这是您的尝试的修订版：

200px

body

详细了解flexbox。

希望我进一步推动了你。

Answer 4

尝试将所有内容放入html <table>中。这应该使两个框都保持内联；

如何在弹出式叠加层和链接中删除多余的空白

4 个答案: