Question

我想像youtube分享弹出窗口，因为它贴在按钮旁边。我试过bootstrap模态，但它是在屏幕中间的弹出窗口。单击YouTube按钮分享按钮时，会弹出显示按钮周围的内容。

有谁知道如何修复它？

HTML

<div class="box">
  <a class="button" href="#popup1">share</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <a class="close" href="#">&times;</a>
    <div class="content">
      <div class="social-fuctions">
        Share to facebook
      </div>
    </div>
  </div>
</div>


css code

    h1 {
      text-align: center;
      font-family: Tahoma, Arial, sans-serif;
      color: #06D85F;
      margin: 80px 0;
    }

    .box {
      width: 40%;
      margin: 0 auto;
      background: rgba(255,255,255,0.2);
      padding: 35px;
      border: 2px solid #fff;
      border-radius: 20px/50px;
      background-clip: padding-box;
      text-align: center;
    }

    /*
    .button {
      font-size: 1em;
      padding: 10px;
      text-decoration: none;
      cursor: pointer;
    }
    */HTMLHTML




    .social-fuctions{
      display: flex;
    }



    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.2);
    /*  transition: opacity 100ms;*/
      visibility: hidden;
      opacity: 0;
    }
    .overlay:target {
      visibility: visible;
      opacity: 1;
    }

    .popup {
        position: absolute;
        bottom: -550px;
        right: 5%;
      left: 15%;
        padding: 15px;
      background: #fff;
      border-radius: 5px;
      width: 30%;
      position: relative;
    }


    .popup .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
    }
    .popup .close:hover {
      color: #06D85F;
    }
    .popup .content {
      max-height: 30%;
      overflow: auto;
    }

    @media screen and (max-width: 700px){
      .box{
        width: 70%;
      }
      .popup{
        width: 70%;
      }
    }

有什么建议吗？非常感谢

Answer 1

将您的框设置为position：relative并使模式框/弹出框div的子项。这样，叠加层将完全位于其父级div的参数内。

.box {
position: relative;
}

.modal {
position: absolute;
}

这样的事情： https://jsfiddle.net/bommy8zu/5/

Answer 2

Moosetuin的方法简单有效。但是不需要relative父母。还有absolute模态。

我做了两个例子，就像Youtube的ShareBox一样，另一个将总是居中。

如何居中：

position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;

请在此处查看：https://codepen.io/Tibixx/pen/zWEpqq

如何制作像youtube这样的自定义弹出式容器

2 个答案: