ページごとに小さな広告を1つ表示するだけだと約束します。このメッセージを非表示にすると、再度表示されることはありませんのでご安心ください。
ヘッダー
コンテンツ
モーダル #1
さらに共有する情報があります。モーダル2までお進みください。
モーダル #2
以上です！
古いメッセージのアーカイブ
受信トレイがいっぱいになっています。古いメッセージの自動アーカイブを有効にしませんか？
アカウントの削除
アカウントを削除してもよろしいですか？
アカウントの削除
アカウントの削除
アカウントを削除してもよろしいですか？
アカウントの削除
アカウントを削除してもよろしいですか？
設定の更新
フィードバックをお寄せください
変更事項
その事項を他のものに 変更しますか？
プロフィール写真
モーダルヘッダー
これは、モーダルのディマーをスクロールさせる原因となる拡張コンテンツの例です。
プロフィール写真
モーダルヘッダー
これは、モーダルのディマーをスクロールさせる原因となる拡張コンテンツの例です。
種類
モーダル
標準的なモーダル
$('.ui.modal') .modal('show') ;
基本
モーダルは複雑さを軽減できます。
$('.ui.basic.modal') .modal('show') ;
古いメッセージのアーカイブ
受信トレイがいっぱいになっています。古いメッセージの自動アーカイブを有効にしませんか？
コンテンツ
ヘッダー
モーダルにはヘッダーを含めることができます。
ヘッダー
コンテンツ
モーダルにはコンテンツを含めることができます。
ヘッダー
画像コンテンツ 2.0の新機能
モーダルには画像コンテンツを含めることができます。
ヘッダー
アクション
モーダルには、アクションの行を含めることができます。
ヘッダー
バリエーション
フルスクリーン
モーダルは画面全体のサイズを使用できます。
$('.fullscreen.modal') .modal('show') ;
サイズ
モーダルのサイズはさまざまです。
$('.mini.modal') .modal('show') ;
$('.tiny.modal') .modal('show') ;
$('.small.modal') .modal('show') ;
$('.large.modal') .modal('show') ;
スクロール可能なコンテンツ2.2.11の新機能
モーダルは画面全体のサイズを使用できます。
ヘッダー
非常に長いコンテンツがここにあります。
$('.ui.longer.modal') .modal('show') ;
状態
アクティブ
アクティブなモーダルはページに表示されます。
例
垂直方向のセンタリングの無効化2.3の新機能
モーダルに動的なコンテンツや複数のステップがある場合、高さが変更されたときにコンテンツが垂直方向にジャンプしないように、センタリングを無効にすることが理にかなっています。
$('.special.modal') .modal({ centered: false }) .modal('show') ;
スクロール可能なモーダル
モーダルのコンテンツがブラウザの高さを超えると、スクロール可能な領域は、ページの下部をスクロールせずに、スクロールに必要なだけのスペースを含むように自動的に拡大されます。
$('.long.modal') .modal('show') ;
内部的にスクロール可能なコンテンツ
モーダルのコンテンツ自体をスクロールさせたい場合は、scrolling contentバリエーションを使用することで実現できます。
$('.longer.modal') .modal('show') ;
複数のモーダル
モーダルは、別のモーダルを開くことができます。allowMultiple: trueパラメーターを使用すると、2番目のモーダルは1番目のモーダルの上に開かれます。それ以外の場合は、2番目のモーダルが開かれる前にモーダルが閉じられます。
// すべてのモーダルを初期化 $('.coupled.modal') .modal({ allowMultiple: true }) ; // 1番目のモーダルのボタンで2番目のモーダルを開く $('.second.modal') .modal('attach events', '.first.modal .button') ; // 最初に1番目を表示する $('.first.modal') .modal('show') ;
$('.coupled.modal') .modal({ allowMultiple: false }) ; // ボタンにイベントをアタッチする $('.second.modal') .modal('attach events', '.first.modal .button') ; // 今度は最初に1番目を表示する $('.first.modal') .modal('show') ;
選択肢の強制
クリックによるモーダルのディマーの閉じを無効にして、ユーザーに選択肢を強制させることができます。
$('.basic.test.modal') .modal('setting', 'closable', false) .modal('show') ;
承認/拒否コールバック
モーダルは、肯定的/承認、否定的/拒否、またはOK/キャンセルボタンに承認/拒否コールバックを自動的に結び付けます。
$('.ui.basic.test.modal') .modal({ closable : false, onDeny : function(){ window.alert('まだ待ってください！'); return false; }, onApprove : function() { window.alert('承認されました！'); } }) .modal('show') ;
イベントのアタッチ
モーダルは、別の要素にイベントをアタッチできます。
$('.test.modal') .modal('attach events', '.test.button', 'show') ;
トランジション
モーダルは、任意の命名されたUIトランジションを使用できます。
トランジションを選択
$('.selection.dropdown') .dropdown({ onChange: function(value) { $('.test.modal') .modal('setting', 'transition', value) .modal('show') ; } }) ;
ディマーのバリエーション
モーダルは、ディマーの表示方法を調整するblurringまたはinvertedなどの追加のバリエーションを指定できます。
$('.ui.modal') .modal({ inverted: true }) .modal('show') ;
$('.ui.modal') .modal({ blurring: true }) .modal('show') ;
使用方法
モーダルの初期化
モーダルは、ページ上のどこにでも含めることができます。初期化時に、モーダルの現在のサイズがキャッシュされ、要素はDOMから切り離されてディマー内に移動されます。
$('.ui.modal') .modal() ;
モーダルのタイトル
画像を左側に表示するか、アイコンを表示することができます。
説明は右側に表示されます。
動作
以下のすべての動作は、次の構文を使用して呼び出すことができます。
$('.ui.modal') .modal('動作名', 引数1, 引数2) ;| 動作 | 説明 |
|---|---|
| show | モーダルを表示します。 |
| hide | モーダルを非表示にします。 |
| toggle | モーダルを切り替えます。 |
| refresh | ページ上のモーダルのセンタリングを更新します。 |
| show dimmer | 関連付けられたページディマーを表示します。 |
| hide dimmer | 関連付けられたページディマーを非表示にします。 |
| hide others | ディマー内で選択されたモーダル以外のすべてのモーダルを非表示にします。 |
| hide all | 同じディマー内の表示されているすべてのモーダルを非表示にします。 |
| cache sizes | 現在のモーダルサイズをキャッシュします。 |
| can fit | モーダルがページに収まるかどうかを返します。 |
| is active | モーダルがアクティブかどうかを返します。 |
| set active | モーダルをアクティブに設定します。 |
設定
モーダル設定モーダル設定は、モーダルの動作を変更します。
| 設定項目 | デフォルト | 説明 |
|---|---|---|
| detachable | true | falseに設定すると、モーダルをディマー内に移動できなくなります。 |
| useFlex | 'auto' | autoは、フレックスコンテナ内の絶対配置要素をサポートするブラウザで自動的にフレックスを使用します。true/falseに設定すると、すべてのブラウザでこの設定が強制されます。 |
| autofocus | true | trueの場合、表示時にモーダル内の最初のフォーム入力にフォーカスが当たります。この動作を無効にするには、falseに設定します。 |
| observeChanges | false | modal DOMの変更によってキャッシュされた位置が自動的に更新されるかどうか。 |
| allowMultiple | false | trueに設定すると、新しいモーダルを開くときに、表示されている他のモーダルは閉じられません。 |
| keyboardShortcuts | true | キーボードショートカットを自動的にバインドするかどうか。 |
| offset | 0 | モーダル外のコンテンツ（例：閉じるボタン）を中央揃えにするための垂直オフセット。 |
| context | body | ディミングする領域を指定するセレクタまたはjQueryオブジェクト。 |
| closable | true | falseに設定すると、ディマーをクリックしてモーダルを閉じることができなくなります。 |
| dimmerSettings |
{ closable : false, useCSS : true } |
UIディマーを拡張するためのカスタム設定を指定できます。 |
| transition | scale | メニューのアニメーション表示/非表示に使用される名前付きトランジション。完全なリストはUIトランジションのドキュメントを参照してください。 |
| duration | 400 | アニメーションの期間 |
| queue | false | 追加のアニメーションをキューに入れるかどうか。 |
コールバックコールバックは、特定の動作後に実行される関数を指定します。
| 設定項目 | コンテキスト | 説明 |
|---|---|---|
| onShow | モーダル | モーダルの表示が始まるときに呼び出されます。 |
| onVisible | モーダル | モーダルの表示アニメーションが完了した後に呼び出されます。 |
| onHide($element) | モーダル | モーダルの非表示が始まるときに呼び出されます。関数がfalseを返すと、モーダルは非表示になりません。 |
| onHidden | モーダル | モーダルの非表示アニメーションが完了した後に呼び出されます。 |
| onApprove($element) | クリック | 肯定的、承認、またはOKボタンが押された後に呼び出されます。関数がfalseを返すと、モーダルは非表示になりません。 |
| onDeny($element) | モーダル | 否定的、拒否、またはキャンセルボタンが押された後に呼び出されます。関数がfalseを返すと、モーダルは非表示になりません。 |
DOM設定DOM設定は、このモジュールがDOMとどのようにインターフェースするかを指定します。
| 設定項目 | デフォルト | 説明 |
|---|---|---|
| namespace | modal | イベント名前空間。モジュールのティアダウンが、要素にアタッチされた他のイベントに影響を与えないようにします。 |
| selector |
selector : { close : '.close, .actions .button', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' }, |
|
| className |
className : { active : 'active', scrolling : 'scrolling' } |
|
デバッグ設定デバッグ設定は、コンソールへのデバッグ出力の制御を行います。
| 設定項目 | デフォルト | 説明 |
|---|---|---|
| name | モーダル | デバッグログで使用される名前。 |
| debug | False | コンソールに標準的なデバッグ出力を提供します。 |
| performance | True | コンソールに標準的なデバッグ出力を提供します。 |
| verbose | True | コンソールに補助的なデバッグ出力を提供します。 |
| error |
error : { method : 'The method you called is not defined.' } |
|