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>

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

1 个答案: