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

【问题标题】：how to make a custom popup container like youtube如何制作像 youtube 这样的自定义弹出式容器
【发布时间】：2018-03-26 05:45:56
【问题描述】：

我想让弹出窗口像 youtube 共享，因为它贴在按钮旁边。我尝试了引导模式，但它在屏幕中间弹出。当点击 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%;
      }
    }

有什么建议吗？非常感谢

【问题讨论】：

标签： css popupwindow

【解决方案1】：

将您的框设置为 position: relative 并使模态框/弹出框 div 的子项。这样，叠加层将绝对定位在其父 div 的参数内。

.box {
position: relative;
}

.modal {
position: absolute;
}

类似这样的： https://jsfiddle.net/bommy8zu/5/

【讨论】：

谢谢 :)

【解决方案2】：

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

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

如何居中：

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

在这里查看：https://codepen.io/Tibixx/pen/zWEpqq

【讨论】：