.net column

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

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

2020年04月02日

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

SE
確かに、ダイアログ表示がなければ「間違って登録解除しちゃった……」ということもあり得そうですよね。
PL
そうですね。ちなみに、似ているもので「ポップアップ」もありますが、一応ダイアログとは区別されているので頭の片隅に置いておいてください。
    • ・ダイアログ

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

    • ・ポップアップ

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

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

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

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

モーダルメッセージ

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

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

モーダル確認ダイアログ

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

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

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

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

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

色を変更する

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

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

色の変更

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

テーマを変更する

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

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

「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分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

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

エントリー(応募フォーム)