html - 在 Angular 2 的表格中显示弹出窗口

Question

我有一个表中的数据。每个数据集都有一个按钮，我可以单击它来发送回它的值。当我单击该按钮时，我希望自己显示一个小的弹出窗口，就像您可以在此处访问:

https://www.w3schools.com/howto/howto_js_popup.asp

我尝试了这个，并在表格中移动了 div:

<tr>
    <td>
        <div class="message" [hidden]="booleanValue">Message</div>
    </td>
</tr>

单击我的按钮曾经正确显示消息，但它不在 div 中，这意味着表格将添加一行，这不是我想要的。

这是类消息的 CSS:

.message {
    display: inline-block;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

Answer 1

我将上面的示例改编为 Angular 。

Plunker

HTML

 <td class="popup" (click)="setShow(5)">Click me to toggle the popup!
    <span [class.show]="pop===5" class="popuptext">A Simple Popup!</span>
 </td>