JavaScriptのconfirmメソッドでポップアップの文字色を変更する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのconfirmメソッドでポップアップの文字色を変更する方法について解説しています。ここではdialogタグを利用して文字色を変更する方法を説明します。サンプルで動作を確認してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptのconfirmメソッドでポップアップの文字色を変更する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

confirmメソッドでポップアップの文字色を変更する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

confirmメソッドによるポップアップの作成方法

window.confirmを利用することで、ポップアップのダイアログメッセージを出力することが簡単にできます。

window.confirm("確認メッセージ");

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

ポップアップの文字色を変更する方法

先ほど紹介したのは、Windowsの機能にあたるため細かい動きを制御することが出来ません。VBscriptを利用する方法もあるのですが、環境によっては利用できない場合もあるかと思います。

そこで、dialogタグを利用した方法をお教えいたします。

※dialogタグは、HTML5.2で導入された要素になります。IEやSafariでは利用できないので注意してください。

<dialog open>ダイアログを開きました</dialog>

これだけでダイアログを開くことは出来るのですが、ただ開くだけで制御が出来ないので、この要素をJavaScriptで制御していきます。

HTML上、dialogタグ内に表示する内容を書いていくことが出来ます。ここではメッセージと閉じるボタンを作成しています。また、HTMLで書けるため、スタイルも自由に設定することが可能です。

<dialog>
  <p>ダイアログ</p>
  <button id="close">閉じる</button>
</dialog>
<button id="open">ダイアログを開きます</button>

JavaScriptでは、これらのイベント取得し制御を行います。下記の様に、各ボタンのクリックイベントを検知し、dialogを開いたり閉じたりします。

var dialog = document.querySelector('dialog');
var open_btn = document.getElementById('open');
var close_btn = document.getElementById('close');
open_btn.addEventListener('click', function() {
  dialog.show();
}, false);
close_btn.addEventListener('click', function() {
  dialog.close();
}, false);

 

実際に書いてみよう

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title>Introduction to JavaScript</title>

</had>

<body>

  <h1>JavaScript のconfirm メソッド</h1>

  <dialog>

    <p style="color: blue;">オリジナルの確認画面</p>

    <button id="ok">OK</button>

    <button id="cancel">Cancel</button>

  </dialog>

  <button id="open">オリジナルの確認画面を開く</button>

  <script>

    var dialog = document.querySelector('dialog');

    var open_btn = document.getElementById('open');

    var ok_btn = document.getElementById('ok');

    var cancel_btn = document.getElementById('cancel');




    open_btn.addEventListener('click', function () {

      dialog.showModal();

    }, false);




    ok_btn.addEventListener('click', function () {

      dialog.close(true);

    }, false);

    cancel_btn.addEventListener('click', function () {

      dialog.close(false);

    }, false);

    dialog.addEventListener('close', function (event) {

        alert(this.returnValue);

    });

  </script>

  </body>

</html>

 

まとめ

今回は表示文字を直接色を変えただけですが、CSSで制御したりボタンの位置や背景なども自由に設定できますので確認画面のカスタマイズをしたい方は、ぜひ試してみてください。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。