BOOTSTRAP3のモーダルが便利そうなので使ってみた結果便利でした。

どうも最近Bootstrapを使用する機会があったので便利だなって思ったのでシェアいたします。HTML,CSS,JSごりごりできる人にとっては自分でできちゃうので意味ないですが、JS書けないって人でもBootstrapのモーダルはできちゃうので初心者の方はぜひトライしてみてください。

Modal-Bootstrap公式

デモ

See the Pen Modal – Bootstrap by Keisuke Yamashita (@keisuke1989) on CodePen.

サンプルコード

モーダルを表示させるためのボタンのコード

data-targetにモーダルのidを指定してあげて、data-toggleにmodalを指定するだけです。classには自分のお好みで追加してあげてCSSいじってみてください。とりあえず今はBootstrapのベーシックなボタンで実装しています。

モーダル部分

外側

上記のコードがモーダルの外側部分になります。idに先ほどボタンのdata-toggleで指定したのと同じ値を、classにはmodalを指定してください。fadeクラスはモーダルを表示する際の動きになります。

内側

ヘッダー

モーダルのヘッダー部分になります。とくに中に入れなければいけないというわけではありません。お好みでつけるかつけないか決めてください。ただUX的に考えてクローズボタンは右上に設置していた方がユーザーに対して親切だと思うのでヘッダーはあった方がいいと思います。data-dismiss=”modal”を指定してあげるだけでボタンをクリックしたらモーダルが閉じるようになっています。

ボディ

特に言うことはないのですが、ここにコンテンツを入れていきます。モーダルの幅はBootstrapのデフォルトでpxなのでもっと広くしたいとか狭くしたい人は自分のCSSで上書きしてしまいましょう。それかmodal-dialogと同じところにmodal-smやmodal-lgを追加すればBootstrapが用意した別のサイズのモーダルが使用できます。

フッター

こちらも任意でつけるかつけないかを決めれます。

以上がBootstrapのモーダルの説明になります。
JSを触らなくて実装できるのは初心者にとって非常にいいですよね。(実際は自分で実装できた方がいいのですが。。。。)

他にもBootstrapにはクラスを付与するだけで使用できる便利な機能があるので近々ご紹介します。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。