モーダルウィンドウを実行したい
シンプルなのでいい
ワンボタンで表示させたい
シンプルなのでいい
ワンボタンで表示させたい
なんて人のためのモーダルウィンドウをJavaScriptで実装する方法をご紹介します。
シンプルで表示がわかりやすいので飽きがこないモーダルウィンドウになっています。
コード量も少なく簡単に実装することができます。これらを実際のサンプルと交えて解説していきます。
モーダルウィンドウのサンプル
サンプルコード
サンプルのコードはHTML、JavaScriptの2種類です。順に解説していきます。
HTML
id="titleBtn"はJavaScriptと紐づけされているため、"titleBtn"をJavaScriptと同じ文字列に置換することで、複数のモーダルウィンドウを実装することができます。
<button id="titleBtn">松下幸之助の名言</button>
JavaScript
getElementById('titleBtn')はHTMLと紐づけされているため、'titleBtn'をHTMLと同じ文字列に置換することで、複数のモーダルウィンドウを実装することができます。
document.getElementById('titleBtn').addEventListener('click', () => {
window.alert("きのうと同じことを、きょうは繰り返すまい。どんな小さなことでもいい。どんなわずかなことでもいい。多くの人々の、このわずかなくふうの累積が、大きな繁栄を生み出すのである。") //
});
注意点
モーダルウィンドウを実装するにあたり、Javascriptで文字を改行させたいときあると思います。
その場合、改行させたい文字の前に\n入れそのまま続けて文字入力を行ってください。
改行（Enterや<br>）をしてモーダルウィンドウを実装しても、実行されないのでご注意ください。
