html - 使用 HTML /CSS /Angular 6 动画单击按钮后打开一个 div（如弹出窗口）

Question

我正在使用 Angular 6 开发一个小型聊天应用程序。当打开超过 3 个聊天框时，我必须隐藏它并且需要在用户单击按钮时显示。就像脸书一样。

我已经设计了一个按钮。但是需要添加带有超出聊天框的弹出窗口。我可以使用 HTML、CSS 或 Angular 6。

我可以做角部分。我只是不知道如何使用 CSS 像 Facebook 一样添加按钮的弹出顶部。

button.toggle {
    float: left;position: relative;height: 39px; 
    width: 39px;background-color: #f7eaea;border: 1px solid #abd2de;
}

 <button class="toggle">
    <img alt="messages" class="messagesIcon" src="https://static.xx.fbcdn.net/rsrc.php/v3/yA/r/r0HGsdgqAb2.png"  style="height:20;width:20;border: 0;">
  
  </button>

标签： htmlcssangular6