• HOME > 
  • Javascript > 
  • jQueryでダイアログを実装する方法【jQueryUIのd...

jQueryでダイアログを実装する方法【jQueryUIのdialogの使い方】

投稿日:

jQueryUIのdialogとは?

WEBサイトを制作しているうえでは、メッセージや入力フォームを扱う時にポップアップされるダイアログを表示させたい場面があります。

本来であればJavascriptでプログラミングして作らなければなりませんが、jQueryUIを使えば簡単に実装することができます。

下のサンプルがjQueryUIのdialogです。ボタンをクリックしてみてください。ダイアログが開きます。

jQuery UIのdialog

jQueryUIを使えば、このようなリッチなデザインと機能を持つダイアログを手軽にサイトに実装することが可能です。

jQueryUIについて

jQueryUIとは、フォームの入力などユーザーの操作面における機能をパッケージ化したjQueryのライブラリです。

Javascriptを簡単に扱えるようにしたjQueryを使って、更にパーツやエフェクトに特化して誰でも手軽に利用しやすいようにしてくれたものがjQueryUIです。

今回説明するダイアログ機能は、通常であれば複雑なコードを記述してプログラミングしなければ実装できませんが、jQuery UIを用いることで短いコードで簡単に扱えるようになります。

jQuery UIをCDNで読み込む

jQueryUIはjQueryとは別で新たに読み込む必要があります。

ダウンロードしたものを使う方法もありますが、ここではCDNを使ってサイトに読みこむ方法を説明します。

下記のコードをコピーして貼りつければOKです。なお、jQuery UIは本体であるJavascriptファイルとスタイルシートの2つをセットで読み込みます。

また、jQuery UIを動作させるためにはあらかじめjQeuryを読み込ませておく必要があるため、jQueryの読み込みのコードよりも後に記述します。

CDN

<!--jQueryを読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--jQuery UIを読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
リンク先のサムネイル
jQuery UIの使い方

jQuery UIとは、jQueryを用いて作られた便利な機能を簡単にサイトに実装することができるライブラリです。具体的には、カレンダーやタブなどの装飾やオートコンプリートなどの機能、フェードインなどのアニメーションが簡単な記述だけで使用することが可能です...【もっと読む】

jQueryUIのdialogの使い方

ここからは実際にjQueryUIのダイアログを導入する手順を説明していきます。

まずは、ダイアログとして表示させる要素をHTMLで作成します。

HTML

<div class="sample_dg">ダイアログの中身をここに記載します。</div>

この要素はダイアログとして表示させたいので、最初はdisplay:noneを指定して非表示にしておきます。

CSS

.sample_dg{
    display: none;
}

続いてダイアログを開くきっかけとなるボタンをHTMLで用意します。ボタンのデザインはCSSで自由に作成してください。

HTML

<button class="btn_open">開く</button>

HTML側の準備ができたので、jQueryでボタンがクリックされたらダイアログが開くようにプログラミングします。

jQueryのダイアログは下記のように記述して有効化します。

ダイアログの記述

クリックされたら開くようにしたいので、onメソッドを使ってクリックイベントを作ります。

jQuery

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            title:"サンプル",
        });
    });
});

以上がjQuery UIのdialogの基本的な使い方です。ここまでをまとめると次のようになります。

HTML

<button class="btn_open">開く</button>
<div class="sample_dg">ダイアログの中身をここに記載します。</div>

CSS

.sample_dg{
    display: none;
}

jQuery

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            title:"サンプル",
        });
    });
});

プレビュー

dialogのオプションを設定する

先程の状態ではダイアログ表示ができただけですので、jQueryUIに用意されているオプションを設定していきカスタマイズします。

既に設定している「title」もオプションのひとつで、その他にもjQuery UIのdialogには次のようなオプションが設けられています。

titleダイアログのタイトルを設定できます。
autoOpentrueを指定するとはじめからダイアログが開いた状態になります。初期値はfalseです。
buttonsダイアログにボタンを設置することができます。
closeText閉じるボタンのテキストを設定できます。なおjQuery UIのテーマを使用している場合は「×」マークが表示されるようになっているのでここで設定したテキストが表示されることはありません。
draggablefalseを指定するとダイアログをドラッグで移動できなくなります。初期値はtrueです。
showダイアログを開くときのアニメーションを選択できます。
hideダイアログを閉じるときのアニメーションを選択できます。
modaltrueを指定するとダイアログが開いている間はページ上の他の操作ができないようになります。初期値はfalseです。
resizablefalseを指定するとユーザーがダイアログのサイズを変更できなくなります。初期値はtrueです。
heightダイアログの高さをpxで指定します。
widthダイアログの幅をpxで指定します。
maxHeightダイアログの高さの上限をpxで指定します。
maxWidthダイアログの幅の上限をpxで指定します。
minHeightダイアログの最小の高さをpxで指定します。
minWidthダイアログの最小の幅をpxで指定します。
positionダイアログの表示位置を指定します。

オプションは下記のように「,」(カンマ)で区切って必要なオプションをdialogへ追記していきます。

ダイアログの記述

autoOpenの使い方

autoOpenを設定すると元の要素に対してdisplay:noneを使って非表示にする必要は無くなりますが、jQuery側での記述に少し修正が必要になります。

jQuery

$(function(){
    $(".sample_dg").dialog({
        title:"サンプル",
        autoOpen:false,//trueにするとはじめから表示
    });
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog("open");
    });
});

buttonsの使い方

buttonsを使うとダイアログ内へ新しいボタンの追加し、押した際の処理を設定することができます。

閉じるなどダイアログに関する処理の他、アラートメッセージを出すなどjQueryによる他の処理を実行させることも可能です。

jQuery

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            title:"サンプル",
            buttons:{
                "キャンセル":function(){
                    $(this).dialog("close");
                },
                "実行":function(){
                    alert("実行ボタンが押されました。");
                },
            },
        });
    });
});

プレビュー

showとhideの使い方

showとhideを使うとダイアログが開閉するときのアニメーションを変更することができます。

設定できるアニメーションのパターンは、「blind」「bounce」「clip」「drop」「explode」「fade」「fold」「highlight」「puff」「pulsate」「scale」「shake」「size」「slide」の中から選びます。

https://jqueryui.com/show/

jQuery

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            show:"fold",
            hide:"slide",
        });
    });
});

プレビュー

modalの使い方

modalを有効にするとダイアログが開いている間は、ダイアログとページの間にフィルターが掛かり、スクロールやクリックといった他の操作ができなくなります。

ユーザーに対してダイアログ内の操作を優先させたい場合などに設定します。

下の例を見てもらうとわかるように、ダイアログが開いているとボタンを押すことができなくなります。

jQuery

$(function(){
    $("#btn1").on("click",function(){
        $("#dialog1").dialog({
            title:"ダイアログ1",
            modal:true,
        });
    });
    $("#btn2").on("click",function(){
        $("#dialog2").dialog({
            title:"ダイアログ2",
            modal:true,
        });
    });
});

プレビュー

dialogのデザインを変更する

jQuery UIは読み込むテーマを変えることで、簡単にデザインを変更することができます。

なお、テーマを変更するとdialogだけでなくjQuery UIの他の機能のデザインも全て変更になりますのでご注意下さい。

下記のCSSファイルを読み込んでいるコードの中の「smoothness」が今回使用しているテーマを示しています。

CDN

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

この部分を変更したいテーマ名に書き換えれば、読み込むテーマが変更されデザインが切り替わります。

テーマは「base」「ui-lightness」「ui-darkness」「smoothness」「start」「redmond」「sunny」「overcast」「re-frog」「flick」「pepper-grinder」「eggplant」「dart-hive」「cupertino」「south-street」「blitzer」「humanity」「hot-sneaks」「excite-bike」「vader」「dot-luv」「mint-choc」「black-tie」「trontastic」「swanky-purse」の中から選択します。

「ui-lightness」というテーマを使う場合は下記のように変更します。

CDN

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">

下のサンプルでは、プルダウンメニューでダイアログデザインが切り替わるようにしてありますので、テーマを選ぶ際の参考にしてください。

jQueryUIのテーマ別デザイン

他のパーツのデザインがどのように変わるかなどテーマの詳細についてはjQuery UIの公式サイトのテーマページをご確認下さい。

https://jqueryui.com/themeroller/

まとめ

ダイアログの開閉をはじめ、モーダル設定やドラッグの可否など自作するには難しい機能もjQueryUIを使えば簡単に導入することができます。デザインも豊富に用意されている点も使いやすいです。またクリックイベント以外でもjQueryでカスタマイズすればさまざまなサービスに活用できると思います。

関連する記事

サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。