sugulogの日記

JavaScript、モーダルウインドウ!要素を生成し画面上に表示してみよう!!

スポンサードリンク

f:id:sugulog:20210626173036p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとモーダルウインドウということで

  •  要素を生成し画面上に表示してみよう

について簡単に解説します!!

その為このブログを読むことで、要素を生成し画面上に表示する技術を手に入れられるのはもちろん、モーダルウインドウも作成できるようになります。

是非最後までご愛読ください。

 

今回は、

  • モーダルウインドウを作成しよう

の順で解説していきます。

では早速、みていきましょう!! 

モーダルウインドウを作成しよう

今回はボタンが押された時に要素を生成し、追加されることでモーダルウインドウを表示します。

因みにモーダルウインドウとは元のウインドウの上に別枠として表示されるウインドウのことです。

まずはHTMLでボタンを作成します。

f:id:sugulog:20210626151934p:plain

次にCSSです。

f:id:sugulog:20210626161853p:plain

ポイントとしてはposition: absoluteを当ててあげることでウインドウの左端を基準とし、topとleftで配置を設定しています。

その為ボタンの上に表示させることができ、モーダルウインドウとして表示させています。

最後にJavaScriptの記述です。

f:id:sugulog:20210626165926p:plain

ボタンクリック時にmodalCreate関数を実行します。

関数ではcreateElementを使用し、div要素を生成しています。

ただ生成だけでは表示させることができないので、まずはclassList.addでCSSを当てていま。

そしてinnerHTMLを使いモーダルウインドウにテキストを挿入し、appendChildでbody要素に対し子要素として挿入します。

その結果、画面上にモーダルウインドウが表示されるようになります。

後はモーダルウインドウ表示後クリックされた時に、removeChildを実行し生成したモーダルウインドウを削除しています。

では実際に動きを確認し、より理解を深めましょう。

f:id:sugulog:20210626172151g:plain

ボタンクリック時にモーダルウインドウが表示され、モーダルウインドウクリック時には削除されているのが確認できますね!

また今回CSSで背景色を少し透過させたため、しっかりとボタンの上に表示されているのも確認でき、モーダルウインドウとして機能しているのも確認できますね!!

 

以上、今回のブログでした。

要素を生成し画面上に表示する技術を手に入れ、モーダルウインドウも作成できるようになりましたか??

要素を生成し表示させる技術は、より自由な実装力を高めます。

一緒に理解を深めていきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!