BootstrapDialogのブートストラップ

Bootstrap Bootstrapdialog

Bootstrapのモーダルをよりサルにやさしいものにしてください。

参照アドレス： http://nakupanda.github.io/bootstrap3-dialog/

モーダルシェルフレーム：

例

最も単純な

表示は提供情報のみを表示し、その他はすべてデフォルトのままにします。

 BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hi Apple!' })

ダイアログタイトル

 BootstrapDialog.show({ title: 'Default Title', message: 'Click buttons below.', buttons: [{ label: 'Title 1', action: function(dialog) { dialog.setTitle('Title 1') } }, { label: 'Title 2', action: function(dialog) { dialog.setTitle('Title 2') } }] })

 BootstrapDialog.show({ title: 'Default Title', message: 'Click buttons below.', buttons: [{ label: 'Message 1', action: function(dialog) { dialog.setMessage('Message 1') } }, { label: 'Message 2', action: function(dialog) { dialog.setMessage('Message 2') } }] })

操作ダイアログのタイトル

アクションダイアログ情報

リモートページをロードする（1）

リモートページをロードする（2）

ボタン

操作ボタン

bootstrapdialogボタンによって作成されるいくつかの追加機能があります。
$ button.toggleEnable（true | false）
$ button.enable（）// $ button.toggleEnable（true）と同等
$ button.disable（）// $ button.toggleEnable（false）と同等
$ button.toggleSpin（true | false）
$ button.spin（）// $ button.toggleSpin（true）と同等
$ button.stopSpin（）// $ button.toggleSpin（false）と同等

ボタンのホットキー

下のボタンをクリックしてみてください。
最後のボタンが無効になっているため、ホットキーを押しても何も起こりません。
ボックスにキーボードを必要とするコンポーネントがいくつかある場合、競合が発生する可能性があることに注意してください。次の例を試すことができます。

ダイアログインスタンスを作成する

BootstrapDialog.show（...）は単なるショートカットです。ダイアログインスタンスが必要な場合は、「new」を使用してください。

実際、BootstrapDialog.show（...）も、作成されたダイアログインスタンスに戻ります。

var $textAndPic = $(' ') $textAndPic.append('Who's this?
') $textAndPic.append(' ') BootstrapDialog.show({ title: 'Guess who that is', message: $textAndPic, buttons: [{ label: 'Acky', action: function(dialogRef){ dialogRef.close() } }, { label: 'Robert', action: function(dialogRef){ dialogRef.close() } }] })

識別子付きのボタン

大きな箱

デフォルトでは、ダイアログのサイズは「size-normal」またはBootstrapDialog.SIZE_NORMALですが、「size-large」またはBootstrapDialog.SIZE_LARGEのオプション「size」を設定できます。

その他のダイアログサイズ

BootstrapDialog.SIZE_WIDEを指定することは、BootstrapModalでcssクラス「modal-lg」を使用することと同じであることに注意してください。

詳しくは

bootstrapdialogはリッチコンテンツの表示をサポートしているため、ダイアログボックスメッセージのビデオクリップを使用することもできます。

ダイアログを閉じることができる/閉じることができない

オプション 'closable'がfalseに設定されている場合、デフォルトの閉じる動作は無効になりますが、dialog.close（）を使用してダイアログを閉じることができます。

ダイアログボックスのコントロールをさらに閉じる

デフォルトでは、'Closable'をtrueに設定すると、ダイアログボックスは次の方法で閉じることができます。ダイアログボックスをクリックし、ESCを押して、ダイアログボックスのタイトルの右側にある閉じるアイコンをクリックします。

ダイアログボックスを閉じたい場合は、ダイアログを閉じるアイコンのタイトルをクリックします。「closeByBackdrop」と「closeByKeyboard」を設定するオプションはfalseです。

 class='modal fade'> 
  class='modal-dialog'> 
  class='modal-content'> 
  class='modal-header'> 
   type='button' class='close' data-dismiss='modal' aria-hidden='true'>× 
  class='modal-title'>Modal title 
   
  class='modal-body'> 
 
One fine body…
 
   
  class='modal-footer'> 
   type='button' class='btn btn-default' data-dismiss='modal'>Close 
   type='button' class='btn btn-primary'>Save changes 
   
   
   
 

確認

|_+_|

コールバックで確認

|_+_|

利用可能なオプション

以下に説明するすべてのオプションは オプション 、ただし、表示するメッセージを表示しないと、奇妙なダイアログが表示されます。
ほとんどのオプションは、initオプションまたはプロパティセッターを介して設定できます。

|_+_|

利用可能な方法