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

今回も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を指しているため、「+」ボタンがクリックされるとモーダルが表示される仕組みです。

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

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

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

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

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

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

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