JavaScriptでポップアップウィンドウを表示させる方法【初心者向け】

初心者でも簡単に使えるJavaScriptのコードを紹介する記事です。ポップアップウィンドウは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。

JavaScriptでボタンを設置したあとで、ポップアップを表示される方法を解説します。メッセージを表示することもできます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

 

ポップアップウィンドウの表示方法

まずはボタンを表示させます。

<img src="images/ducks.jpg" alt="あひる">
<p>あひる5個セット</p>
<p>800円</p>
<input type="submit" value="購入する" >

こここから「購入する」ボタンをクリックすしたらポップアップウィンドウが表示されるようにします。

 

ポップアップウィンドウを表示させるには、

<input type="submit" value="購入する" onClick="alert('購入しました！');">

と入れるだけです。

ここで入力した「購入しました！」という文言がアラートとしてポップアップウィンドウで表示されますので、文字を変えてもOKです。

 

適用するとこうなります。

<img src="images/ducks.jpg" alt="あひる">
<p>あひる5個セット</p>
<p>800円</p>
<input type="submit" value="購入する" onClick="alert('購入しました！');">

ボタンをクリックすると、このように表示されるようになりました。

 

今回はただクリックすると表示されるだけですので、もう少し応用した内容にもチャレンジしてみてください。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

JavaScriptのwindow.openメソッドの使い方についても説明しているので、合わせてご覧ください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。