Liberty

こんにちは、yutaです。

今日はBootstrapのAlertsを使って、「閉じるボタンを押したら消えるダイアログ」作ってみます！

Bootstrapの導入方法についてはこちらの記事で解説しています。

記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。

1.まずはシンプルなalertから

もっともシンプルなalertは以下のコードだけで実装できます。

<div class="alert alert-success">アラート</div>

alert-successの部分で文字色、背景色、ボーダーの色を設定していますが以下の通りバリエーションがあるので好きなものを選んでください。

2.閉じるボタン付きのalert

本題のボタン付きダイアログを作ってみます。コードは以下の通り。

【HTML】

<div class="alert alert-success mx-auto alert-dismissible fade show" id="alert1" role="alert">
    <h4 class="alert-heading">メンバー募集！</h4>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <p>私たちと一緒に会社を盛り上げてくれるメンバーを募集しています。スタッフ全員で面白いと思うアイデアを出し合い、世界に発信していきましょう！</p>
    <hr>
    <p>詳細は<a href="#">こちら</a>から</p>
</div>

【CSS】

#alert1{
    width: 40%;
}

各要素は以下のように配置されていますね。

各要素のクラスなどの意味は以下の通り。

上記コードを実行してみると以下のようになります。