たけのこブログ 
今回もBootstrapとjQueryを使用して、TODOリストを作成します。
機能は前回と同じです。
前回と異なる点は、Bootstrapのモーダルを使用したTODOリストを作成する点になります。
モーダルって何？と言う方は、下のGIFを再生して見てください。（ポップアップといった方が伝わりやすいかも知れません。）元の画面とは別の画面が出てくるイメージのものです。
TODOリストでmodalを表示してタスクを追加するようにしました。
作成時間：1時間（前回のソースを流用）#jQuery #Bootstrap pic.twitter.com/z4d4WOkJui— たけのこ (@takenoko_blog) June 21, 2018
HTML
21〜51行目までがモーダルを表示するソースコードになります。
18行目「+」ボタンのbuttonタグの中で、data-target=”#todoModal”と指定しています。“#todoModal”は21行目のモーダルのidを指しているため、「+」ボタンがクリックされるとモーダルが表示される仕組みです。
JavaScript
41行目でモーダルを非表示にする処理を追加しています。
モーダルの「登録」ボタンを押した時に、モーダルは非表示になった方が使いやすいと考えたためです。
まとめ
モーダルを使用する利点は、元の画面とモーダルで機能を分けることが可能になり、画面をシンプルに出来ることだと思います。
モーダルを使用できると、画面レイアウトの表現の幅も広がると思いますので、ぜひ使用してみてください。
この記事を読んだ方におすすめのサイト
Bootstrapの知識をさらに深めたい方には、UdemyのBootstrap4のコース がおすすめです。
Bootstrapを使用して、おしゃれなサンプルページを5つ作成することができるので、このコースを利用して実際に手を動かせば、かなり実践的な知識を得ることができます。
