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

jQuery

ツール・ソフトウェア

公開日時: 2020-09-25

この記事でわかること

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

システム エンジニア: jQueryのみでダイアログは実装できますか？

プロジェクト リーダー: HTML/CSS/JavaScirptの処理をいくつか書く必要があるけど、jQueryのみで実装は可能です。

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

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

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

完成イメージ

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

<div class="dialog" id="simple-dialog">
  <div class="dialog-header">
    <span>ダイアログのタイトル</span>
  </div>
  <div class="dialog-content">
    <p>ダイアログに表示する本文です</p>
    <button id="close">CLOSE</button>
  </div>
</div>

<!--ダイアログを開くためのボタン-->
<button id="open">OPEN</button>

<span>ダイアログのタイトル</span>

</div>

<p>ダイアログに表示する本文です</p>

<button id="close">CLOSE</button>

</div>

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

.dialog {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 3.2rem;
  margin: auto;
  display: none;
  border:1px solid #333;
  z-index:1000;
}

.dialog-header {
  border: 1px solid #aaa;
  background: #cccccc;
}
.dialog-content {
  padding: .5rem;
  background: #fff;
}

.dialog {

overflow: hidden;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 300px;

height: 3.2rem;

margin: auto;

display: none;

border:1px solid #333;

z-index:1000;

}

.dialog-header {

border: 1px solid #aaa;

background: #cccccc;

}

.dialog-content {

padding: .5rem;

background: #fff;

}

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

$(function() {
  $("#open").click(function(){
    $("#simple-dialog").show();
  });  
  $("#close").click(function(){
    $("#simple-dialog").hide();
  });  
};

$(function() {

$("#open").click(function(){

$("#simple-dialog").show();

});

$("#close").click(function(){

$("#simple-dialog").hide();

});

};

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

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

jQuery UIの導入

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

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">

1 2	<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">

ダイアログを実装する

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

<div id="simple-dialog" title="ダイアログタイトル" style="display:none;">
  <p>ダイアログに表示する本文です</p>
</div>
<button id="open">OPEN</button>

<p>ダイアログに表示する本文です</p>

</div>

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

$(function() {
  $("#open").click(function(){
    $("#simple-dialog").dialog();
  });
});

$(function() {

$("#open").click(function(){

$("#simple-dialog").dialog();

});

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

実行結果

システム エンジニア: jQuery UIを使うと、少ないコードでダイアログが実装でき便利ですね。

プロジェクト リーダー: そうですね、アニメーションやモーダルダイアログなども簡単に実装できるので、公式APIも確認してみてください。

HTML5のdialog要素にも注目

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

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

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

jQuery UIの導入

ダイアログを実装する

HTML5のdialog要素にも注目

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

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

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

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

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

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

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

jQuery UIの導入

ダイアログを実装する

HTML5のdialog要素にも注目

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

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

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

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

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

jQueryを基礎から学ぶのに最適な本2選

【jQueryが動かない】Chromeのデベロッパーツールで原因を見つける方法

jQuery UIのSortableを使ってリストをドラッグで並び替える

HTMLで基本のスライドショーの作成方法とカスタマイズのやり方を解説