jQuery ダイアログ

今日の記事では、ダイアログと jQuery のさまざまなオプションについて学習します。

jQuery のダイアログ

基本的なダイアログボックスは、ビューポート内に配置され、iframe を通して表示されるページコンテンツ（選択アイテムなど）から保護されたオーバーレイです。タイトルバーとコンテンツ領域があり、デフォルトで x アイコンを使用して移動、サイズ変更、および閉じることができます。

コンテンツの長さが最大の高さを超えると、スクロールバーが自動的に表示されます。

下部のボタンバーや半透明のモーダルオーバーレイレイヤーなどのオプションを追加できます。ダイアログで使用できるいくつかのオプションを以下に示します。

1. autoOpen-ブール値。この値が true に設定されている場合、ダイアログは初期化時に自動的に開きます。false の場合、open() メソッドが呼び出されるまでダイアログは非表示のままになります。

2. closeOnEscape-フォーカスがあり、ユーザーがEscキーを押したときにダイアログボックスを閉じるかどうかを示すブール値。

3. closeText-閉じるボタンのテキストを指定する文字列値。デフォルトのテーマを使用する場合、終了テキストは目に見えて非表示になります。

4. draggable-ブール値。true に設定すると、ダイアログをタイトルバーからドラッグできます。これには、jQueryUI の draggable ウィジェットをインポートする必要があります。

5. modal-ブール値。true に設定すると、ダイアログはモーダル動作になります。

   他のページ要素は非アクティブ化されています。つまり、操作できません。モーダルダイアログは、ダイアログの下にオーバーレイを作成します。ただし、Web ページのさまざまな要素の上。

詳細については、ダイアログのドキュメントをご覧ください。

次の例でそれを理解しましょう。

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

ダイアログを実装する前に、上記の 2 行をインポートする必要があります。これは、ダイアログ機能を提供するサードパーティのライブラリです。

インポートされていない場合、ダイアログは機能ではありませんというエラーがスローされます。

<button id="delf">Open Dialog</button>
<div id="delftstack" title="Welcome to Delftstack">
  Welcome to Delftstack
</div>

$(function () {
  $("#delftstack").dialog({
    autoOpen: false,
  });
  $("#delf").click(function () {
    $("#delftstack").dialog("open");
  });
});

デモ

上記の例では、ダイアログを開くボタンを定義しました。デフォルトでは、ダイアログは閉じられます。

ボタンをクリックすると、ダイアログが開くメソッドをトリガーし、画面に表示されます。

jQuery をサポートする任意のブラウザーで上記のコードスニペットを実行してみてください。この結果が表示されます。