0

メッセージの右上に「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');
}
4

1 に答える 1

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 コードを追加するだけです。

于 2013-06-09T20:30:34.263 に答える