モーダルダイアログを画面中央に表示する

公開日: : 最終更新日:2013/12/10 テクニック , ,

モーダルダイアログを画面中央に表示

JavaScriptでモーダルダイアログを表示するには
「showModalDialog()」を使用しますが、
その表示したダイアログを画面の中央に表示します。

モーダルダイアログを画面中央に表示

JavaScriptでモーダルダイアログを表示するには
「showModalDialog()」を使用しますが、
その表示したダイアログを画面の中央に表示します。

showModalDialog()の呼び出し側ソース

showModalDialog()を呼び出す側のソースは以下のようになります。

ボタンの「onClick」イベントでダイアログを表示する関数を
呼び出します。

showModalDialog()の呼ばれる側ソース

showModalDialog()で呼ばれる側のソースは以下のようになります。

普通のHTMLページです。

モーダルダイアログを画面の中央に表示する

モーダルダイアログを画面の中央に表示するには3番目の引数に
「center=1」を指定します。
これでモーダルダイアログが画面の中央で表示されます。

また、「dialogHeight」や「dialogWidth」はモーダルダイアログの
高さや幅を指定する際に利用し、それぞれのパラメータを
「;」でつないで複数指定することができます。

showModalDialog()への利用できる引数

showModalDialog()へは以下の引数が指定できます。

パラメータ名 説明
dialogWidth 数値。単位必須 ダイアログの横幅
dialogHeight 数値。単位必須 ダイアログの縦幅
dialogLeft 数値。単位必須 ダイアログのX座標
dialogTop 数値。単位必須 ダイアログのY座標
center 真偽値 ダイアログを画面の中央に表示(dialogLeft,dialogTopが指定すると、無効
status 真偽値 ダイアログのステータスバーを表示す
scroll 真偽値 (内容がダイアログのサイズより大きい場合に)スクロールバーを表示
resizable 真偽値 サイズを変更可能にする
help 真偽値 ヘルプボタンを表示
minimize 真偽値 最小化ボタンを表示
maximize 真偽値 最大化ボタンを表示

注意事項

呼び出される側のダイアログ画面でウィンドウの高さや幅、表示位置などを
初期処理で設定すると呼び出す側で指定した値が無効になりますので、
注意が必要です。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • 14 follow us in feedly

関連記事

a0001_013635

Javascriptで開いた子画面から親画面の関数を呼び出す

子画面から親画面の関数を呼び出す Javascriptで開いた子画面(ポップアップウィンドウ)から

記事を読む

SQLServer

setInterval()やsetTimeout()に引数ありの関数を指定する

setInterval()やsetTimeout()に引数ありの関数を使う Javascriptで

記事を読む

no-img

Javascriptでメッセージボックスを表示する

メッセージボックスを表示 画面にJavascriptでメッセージボックスを表示します。 久々にJ

記事を読む

no-img

HTMLで動的にコントロールの表示/非表示を切り替える

動的にコントロールの表示/非表示を切り替える HTMLとJavascriptを使って表示されている

記事を読む

keybord_black

Javascriptの変数は初期化して使わないとundefinedになるので要注意

どんな言語もローカル変数は初期化して使うのが良い Javascriptに限らずどんな言語にも言える

記事を読む

no-img

JavascriptでTABLEタグに行を追加、削除する

TABLEタグに行を追加、削除する Javascriptを使ってHTML上のテーブルに行を追加

記事を読む

keybord_black

Javscriptでイベントを追加する

Javscriptで既存のイベントに処理(関数)を追加する すでにあるイベントに処理(関数)を追加

記事を読む

calender

Javascriptで日付から曜日を求める

Javascriptで日付から曜日を求める Javascriptで指定された日付の曜日を取得します

記事を読む

no-img

HTML-AタグのhrefをJavascriptで動的に有効/無効を切り替える。

Aタグのhrefの有効無効を切り替える 画面の選択状態によってAタグのhrefを動的に有効/無効を

記事を読む

a0001_013635

ブラウザの閉じるボタンが押下された時の制御

ブラウザの閉じるボタン(「×」)が押下された時のイベント ブラウザの閉じるボタンが押下された時の制

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

no-img
JavascriptでJavaの配列を扱う方法

JavascriptでJavaのint[]の配列を扱う Javasc

a0001_013635
ブラウザの閉じるボタンが押下された時の制御

ブラウザの閉じるボタン(「×」)が押下された時のイベント ブラウザの

keybord_black
Javascriptの変数は初期化して使わないとundefinedになるので要注意

どんな言語もローカル変数は初期化して使うのが良い Javascrip

keybord_black
Javscriptでイベントを追加する

Javscriptで既存のイベントに処理(関数)を追加する すでにあ

no-img
HTMLで動的にコントロールの表示/非表示を切り替える

動的にコントロールの表示/非表示を切り替える HTMLとJavasc

→もっと見る



PAGE TOP ↑