javascript - 带有关闭按钮的警告消息弹出窗口

Question

我想在消息的右上角添加一个“X”按钮，以便人们可以关闭它。你们中的任何人都可以帮助我吗？我的 JavaScript 不是那么好

这是HTML：

<div class="warning">This is just a test.</div>

这是CSS：

.warning {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('images/icons/warning.gif');
}

Answer 1

您可以使用absolute定位来设置您的近距离图像。

你只需要用父 div 容器包装你的标记

<div class="parent">
<div class="warning">This is just a test.</div>
    <img class="close" src="http://findicons.com/files/icons/1715/gion/24/dialog_cancel.png" />
</div>

然后像这样添加css

.parent
{
  position:relative;
}
.close
{
    position:absolute;
    top:-15px;
    right:-15px;
    height:20px;
    width:20px;
}

JS小提琴

并隐藏这一点。您只需要添加一些 javascript 代码。