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

jQueryでダイアログを表示する。閉じるボタンの実装方法とは?

 
jQueryでダイアログを表示する。閉じるボタンの実装方法とは?
基本情報技術者試験の試験対策はこちら>>

JavaScriptには、ダイアログを表示するalertやconfirm関数があります。しかし、これらの関数は簡単なメッセージと、OK/キャンセル程度しか表示できず、使い勝手が良くありません。
この記事では、jQueryのみで独自のダイアログを実装する方法と、jQuery UIのDialog APIを使って、数行で簡単にダイアログを実装する2つの方法を解説します。

SE
jQueryのみでダイアログは実装できますか?
PL
HTML/CSS/JavaScirptの処理をいくつか書く必要があるけど、jQueryのみで実装は可能です。

実行環境
・jQuery 3.1
・jQuery-ui 3.1

jQueryのみでダイアログを作る

通常はダイアログが簡単に実装できる、jQuery UIを使えれば良いですが、環境によってはjQuery UIが使えないケースもあるでしょう。そのような場合、jQueryのみでダイアログを実装することも可能です。
今回は、次の完成イメージのようなダイアログを、jQueryとHTMLを使って作成するサンプルコードを紹介します。

完成イメージ
jQueryのダイアログ

最初は、ダイアログのUI部分となるHTMLを作成します。ダイアログ本体と、ダイアログを表示するためのボタンを配置します。

CSSを使って、ダイアログを装飾します。今回は、ダイアログが画面中央に表示されるようにdialogクラスのCSSを設定します。

最後に、JavaScirptで「OPENボタン」がクリックされた時にダイアログを表示し、「CLOSEボタン」でダイアログを閉じる処理を記述します。

jQUery UIを使ってシンプルにダイアログを実装する

続いて、jQuery UIを使ってダイアログを表示する方法を解説します。jQuery UIを使えば、たった数行のコードでダイアログが実装できます。

jQuery UIの導入

HTMLに、jQuery UIのJS本体とCSSテーマを読み込みます。 公式サイトからダウンロードして読み込むか、以下のようにCDNからファイルを読み込みます。

ダイアログを実装する

ダイアログのUI部分となるHTMLを作成します。jQuery UIでは、タイトルはダイアログにする要素のtitle属性に設定します。

JavaScirptで「OPENボタン」がクリックされた時にダイアログを表示します。jQuery UIでは、ダイアログを閉じるためのボタンは標準で実装されているため、特に処理を記述する必要はありません。

上のコードをブラウザで表示し、OPENボタンをクリックすると次のようなダイアログが表示されます。
閉じるボタンは特に実装しなくても、右上の「×」をクリックすると、ダイアログが閉じてくれます。

実行結果
jQuery UIのみのダイアログ

SE
jQuery UIを使うと、少ないコードでダイアログが実装でき便利ですね。
PL
そうですね、アニメーションやモーダルダイアログなども簡単に実装できるので、公式APIも確認してみてください

HTML5のdialog要素にも注目

jQueryやjQuery UIを使ってダイアログを実装する方法を解説してきました。
今回は紹介出来ませんでしたが、HTML5では、新たにdialog要素が追加されました。 dialog要素は、その名の通りダイアログを表示するHTML要素で、jQuery不要で標準のJavaScriptだけダイアログが実装できるようになりました。
2020年8月現在では、一部のブラウザが対応していないなどの問題がありますが、将来的にはdialog要素使ったダイアログの実装が標準になるでしょう。

>>>エンジニアの案件を探すならFEnet .NET Navi


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

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

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

Search

Popular

reccomended

Categories

Tags