.NET開発者のためのブログメディア

サービスの解約や何かを削除する際、ユーザーに対して「本当に〇〇してもよいですか？」というようなダイアログが表示されることがあります。誤操作を防ぐためにも役立つダイアログですが、実はjQuery UIで簡単に実装することができるのです。今回は、jQuery UIを使ってダイアログ表示を実装する方法を紹介していきたいと思います。

SE: 確かに、ダイアログ表示がなければ「間違って登録解除しちゃった……」ということもあり得そうですよね。

PL: そうですね。ちなみに、似ているもので「ポップアップ」もありますが、一応ダイアログとは区別されているので頭の片隅に置いておいてください。

- ・ダイアログ

ユーザーが何か操作をしている過程で開かれる画面。ユーザーに入力や「はい」「いいえ」などの選択を求める。

- ・ポップアップ

Webサイトなどでポンっと表示される小画面。ユーザーに何か操作を求めるのではなく、キャンペーンや広告などユーザーに見てほしい情報を表示することが多い。

では、さっそくダイアログ表示を実装していきましょう。

シンプルなダイアログ表示の作成

はじめに、シンプルなダイアログ表示を作成してみましょう。次のように記述していきます。

モーダルメッセージ

“ダウンロードが完了しました”などのメッセージを表示するダイアログです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>modal msg</title>
  <!-- jQuery UIを読み込む -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <!-- ダイアログ表示の実装 -->
  <script>
    $( function() {
      $( "#dialog-message" ).dialog({
        modal: true,
        buttons: {
          "OK": function() {
            $( this ).dialog( "close" );
          }
        }
      });
    } );
  </script>
</head>
<body>
  <div id="dialog-message" title="タイトル">
    <p>
      <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
      ここに内容を書く
    </p>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>modal msg</title>

$( function() {

$( "#dialog-message" ).dialog({

modal: true,

buttons: {

"OK": function() {

$( this ).dialog( "close" );

}

});

} );

</script>

</head>

<body>

<p>

ここに内容を書く

</p>

</div>

</body>

</html>

実行結果
シンプルなダイアログ

モーダル確認ダイアログ

“本当に削除しますか？”などの確認を行うダイアログです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>modal confirm</title>
  <!-- jQuery UIを読み込む -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <!-- ダイアログ表示の実装 -->
  <script>
    $(function() {
      $( "#dialog-confirm" ).dialog({
        modal: true,
        buttons: {
          "はい": function() {
            $( this ).dialog( "close" );
          },
          "いいえ": function() {
            $( this ).dialog( "close" );
          }
        }
      });
    });
  </script>
</head>
<body>
  <div id="dialog-confirm" title="タイトル">
    <p>
      <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
      ここに内容を書く
    </p>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>modal confirm</title>

$(function() {

$( "#dialog-confirm" ).dialog({

modal: true,

buttons: {

"はい": function() {

$( this ).dialog( "close" );

"いいえ": function() {

$( this ).dialog( "close" );

}

});

</script>

</head>

<body>

<p>

ここに内容を書く

</p>

</div>

</body>

</html>

実行結果
モーダル確認ダイアログ

それぞれきちんとダイアログが表示されています。
とはいえ、何だか少し味気ないと感じた方もいらっしゃるかと思います。ということで、次項ではダイアログ表示のデザインをカスタマイズしていきましょう。

ダイアログ表示のカスタマイズ

jQuery UIでは「.ui-dialog-titlebar」、「.ui-dialog-content」などのクラスがあらかじめ用意されています。もちろん自身でクラスを追加することもできますが、ここでは用意されているクラスを使ってデザインを変更していきます。

色を変更する

先ほどのソースコードの中に（どちらでも可）以下のコードを追記していきます。

<!-- ダイアログのデザイン -->
  <style>
  /* ダイアログのタイトル */
  .ui-dialog-titlebar {
    color: #ffffff;
    background: green;
  }

  /* ダイアログの内容 */
  .ui-dialog-content {
    color: orange;
  }
  </style>

<style>

/* ダイアログのタイトル */

.ui-dialog-titlebar {

color: #ffffff;

background: green;

}

/* ダイアログの内容 */

.ui-dialog-content {

color: orange;

}

</style>

では、ブラウザでどのように表示されているか見てみましょう。

色の変更

このように、簡単に色を変えることができました。

テーマを変更する

今回はjQuery UIのクラス要素を取得してCSSで色を変えましたが、jQuery UIが提供しているテーマを変えることでも十分カスタマイズすることができます。

変えるコードはこちら。※ヘッダー内5行目

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

5	<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

「base」の箇所を「ul-lightness」や「redmont」に変えるだけで、一度にデザインを変更させることができます。詳細は下記URLをご参照ください。
https://jqueryui.com/themeroller/
※画面左側の黒いボックス（ThemeRoller）の[Gallary]タブをクリック。

ちなみに以下は「start」に変更した際のデザインです。

startに変更

SE: jQuery UIでこんな簡単にダイアログ表示が実装できるんですね。

PL: jQueryはプログラミングやデザインの知識が少ない人でも比較的少ない時間で実装できるんですよ。

jQuery UIでオリジナルのダイアログを表示しよう

今回は、jQuery UIを使ってダイアログ表示の実装とカスタマイズを行っていきました。jQuery UIを活用すれば、カッコいいデザインのダイアログを短い時間で実装することができます。この記事を参考に、ぜひWebサイトやWebアプリケーションなどにダイアログ表示を組み込んでみてはいかがでしょうか。

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020年03月17日
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020年03月16日
【.NETが統合】.NET 5の概要と今後のリリース予定

2020年03月05日

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

jQuery UIを使ってダイアログ表示を実装する方法

シンプルなダイアログ表示の作成

モーダルメッセージ

モーダル確認ダイアログ

ダイアログ表示のカスタマイズ

色を変更する

テーマを変更する

jQuery UIでオリジナルのダイアログを表示しよう

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

ソフトを用いた3DCGアート/東京都千代田区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク