jQuery UIでModal Dialog（モーダルダイアログ）を表示する方法
jQuery UIでModal Dialog（モーダルダイアログ）を表示する方法
サンプル
はじめまして。ようこそこのサイトへ。詳しい自己紹介についてはこちらをご覧ください。
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var dialog1;
var dialog2;
$( function() {
dialog1 = $( "#dialog" ).dialog({
autoOpen: false,
modal:true,
draggable:true,
height: 400,
width: 350,
resizable:true,
closeText:"トジル",
buttons: [
{
text: "閉じる",
icon: "ui-icon-heart",
click: function() {
$( this ).dialog( "close" );
}
}
],
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
dialog2 = $( "#dialog2").dialog({
draggable:false,
modal: true,
title: "jQuery UI Dialog",
buttons: {
"ＯＫ": openDialog1,
"キャンセル": function() {
dialog2.dialog( "close" );
}
},
});
} );
function openDialog1() {
dialog2.dialog( "close" );
dialog1.dialog("open");
}
</script>
</head>
<body>
<div id="dialog" title="確認（タイトル）">
<p>はじめまして。ようこそこのサイトへ。詳しい自己紹介については<a href="./">こちら</a>をご覧ください。</p>
</div>
<button id="opener">開く</button>
<div id="dialog2">
今回は「jQuery UI の ダイアログ（Dialog）を紹介します。
</div>
<p>
<a href="/">ホームに戻る。モーダルダイアログ表示時、クリックできません</a>
</p>
</body>
</html>デモ
jQuery UI Dialog Widget
オプション
いくつかオプションを紹介しておきます。
autoOpen
「true」にすると初期表示時に自動的にダイアログが開きます。デフォルトは「false」です。
ボタンを設定する場合の、オプションとなります。
二つのタイプを指定できます。
| Array型 | ボタンに設定する属性やプロパティ、処理などを定義できます。 text：ボタンラベル icon：ボタンにつけらえるアイコン定義（「icons」参照） click：クリック時の処理や関数をしてできます。 |
| Object型 | ボタンのラベルとクリック時の処理を合わせて定義できます。 例） “ＯＫ”: openDialog1, “キャンセル”: function() { dialog2.dialog( “close” ); } |
classes
ダイアログのCSSクラス定義が可能です。
デフォルトは
{
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all",
}です
closeOnEscape
「true」にすると、ダイアログ表示時「Esc」キーを押すと、ダイアログが閉じられます。
デフォルトは「true」です。
closeText
ダイアログの右上の✖記号の代替テキストになります。よって、マウスポイントを乗せた時に初めて表示されるもので、常に表示される文字列ではありません。
draggable
「true」にすると、ダイアログをドラッグさせることができます。
デフォルトは「true」です。
height
ダイアログの高さをピクセルで指定できます。
デフォルトは「auto」という文字列で自動的に調整する設定となっています。
hide
ダイアログが閉じる際の、効果などをしているオプションになります。指定する型は四つになります。
| Boolean型 | 「false」を指定すると閉じる際の効果なしとなります。 「true」にすると、デフォルトの時間でツールチップがフェードアウトします。 このオプションのデフォルトは「true」です。 |
| Number型 | 指定された時間でフェードアウトします、指定するのはミリ秒 |
| String型 | ツールチップが閉じる際の効果を指定します、指定できるのは以下の文字列 slideUp または、「jQuery UI effect」のEffect文字列 blind bounce clip drop explode fade fold highlight puff pulsate scale shake size slide transfer |
| Object型 | 「effect」「delay」「duration」「easing」の４つのプロパティを配列で指定できます。 effect ：『String型』の指定のように、効果を文字列で指定できます。 delay：効果開始までの時間（ミリ秒） duration：効果の継続時間（ミリ秒） easing：効果のスピードや動き方を定義するプロパティ。詳細はこちらの「Easings」を参照ください。実際には「linear」や「swing」などを指定してください。 |
maxHeight
リサイズできるダイアログがの最大高さをピクセルで定義できます。
デフォルトは「false」です。
maxWidth
リサイズできるダイアログがの最大幅をピクセルで定義できます。
デフォルトは「false」です。
minHeight
リサイズできるダイアログがの最小高さをピクセルで定義できます。
デフォルトは「150」。
minWidth
サイズできるダイアログがの最小幅をピクセルで定義できます。
デフォルトは「150」。
modal
「true」にすると、ダイアログ表示時、モーダル状態になり、ほかのオブジェクトは無効化され、操作することができなくなります。
デフォルトは「false」。
position
ダイアログを表示する位置を定義できます。
「jQuery UI Position」の定義方法で指定します。
デフォルトは、
{ my: "center", at: "center", of: window }です。
resizable
「true」にすると、ダイアログウインドウの大きさを変えることができるようになります。
デフォルトは「true」です。
show
ダイアログを開く際の、効果などを指定するオプションになります。指定する型は四つになります。
| Boolean型 | 「false」を指定すると開く際の効果なしとなります。 「true」にすると、デフォルトの時間でタブがフェードインします。 |
| Number型 | 指定された時間でフェードインします、指定するのはミリ秒 |
| String型 | タブを開く際の効果を指定します、指定できるのは以下の文字列 slideDown または、「jQuery UI effect」のEffect文字列 blind bounce clip drop explode fade fold highlight puff pulsate scale shake size slide transfer |
| Object型 | 「effect」「delay」「duration」「easing」の４つのプロパティを配列で指定できます。 effect ：『String型』の指定のように、効果を文字列で指定できます。 delay：効果開始までの時間（ミリ秒） duration：効果の継続時間（ミリ秒） easing：効果のスピードや動き方を定義するプロパティ。詳細はこちらの「Easings」を参照ください。実際には「linear」や「swing」などを指定してください。 |
title
ダイアログのタイトル領域の文字列を定義するオプションです。
デフォルトは「NULL」で、対象オブジェクトのtitle属性の文字列になります。
width
ダイアログの幅をピクセルで定義できるオプションです。
デフォルトは「300」です。
ご参考
関連ページ
- 「Nifty Modal Window Effects」を利用してモーダルウインドウを実装する方法
- Bootstrapでモーダル（Modal）を作る方法
- Fancybox v4でモーダルウインドウを作る方法
- モーダル（Modal）を自作する方法
