投稿日 : 2019年4月15日

【Bootstrap】alertを使って、閉じるボタンを押したら消えるダイアログを作ってみる

Bootstrap|HTML・CSS|プログラミング

こんにちは、yutaです。

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

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

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

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

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

<div class="alert alert-success">アラート</div>
一番シンプルなalert

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

alert色のバリエーション

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%;
}

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

要素の配置イメージ

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

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

お問い合わせ

E-mail : yutric9☆gmail.com
☆を@に置き換えて送信してください。
仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。

準備中