【初心者向け】BootstrapとjQueryでTODOリストを作成② 〜モーダルを使う〜

今回もBootstrapとjQueryを使用して、TODOリストを作成します。

機能は前回と同じです。

前回と異なる点は、Bootstrapのモーダルを使用したTODOリストを作成する点になります。

モーダルって何?と言う方は、下のGIFを再生して見てください。(ポップアップといった方が伝わりやすいかも知れません。)元の画面とは別の画面が出てくるイメージのものです。

HTML

21〜51行目までがモーダルを表示するソースコードになります。

18行目「+」ボタンのbuttonタグの中で、data-target=”#todoModal”と指定しています。“#todoModal”は21行目のモーダルのidを指しているため、「+」ボタンがクリックされるとモーダルが表示される仕組みです。

JavaScript

41行目でモーダルを非表示にする処理を追加しています。

モーダルの「登録」ボタンを押した時に、モーダルは非表示になった方が使いやすいと考えたためです。

まとめ

モーダルを使用する利点は、元の画面とモーダルで機能を分けることが可能になり、画面をシンプルに出来ることだと思います。

モーダルを使用できると、画面レイアウトの表現の幅も広がると思いますので、ぜひ使用してみてください。

この記事を読んだ方におすすめのサイト

Bootstrapの知識をさらに深めたい方には、UdemyのBootstrap4のコース がおすすめです。

Bootstrapを使用して、おしゃれなサンプルページを5つ作成することができるので、このコースを利用して実際に手を動かせば、かなり実践的な知識を得ることができます。

Udemy|Bootstrap4のおすすめコースはこちら