在 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>