テクニック

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

投稿日:2013/10/21 更新日:

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

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 真偽値 最大化ボタンを表示

注意事項

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

当サイトのおすすめ記事

レンタルサーバー 1

当サイトは約5年間、さくらのレンタルサーバで運用させて頂きました。 何かトラブルがあったわけではないのですが、WordPressの表示速度を速くしたくてSSD搭載のレンタルサーバーで運用してみることに ...

プログラミング 2

SQLでIFを使わずに条件分岐する SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでテーブル型を戻り値とする関数を作る SQLServerではINT型やVARCHAR型などを返す関数と同様に ユーザー定義テーブル型を戻り値とする関数を作成できます。 テーブル型を戻 ...

5

アフィリエイトで即効成果を出す アフィリエイトで成果を出す、なかなか難しいですよね。 サイトをいくつも立ち上げてすでにコツをつかんでいる人なら チョチョイっとやっていけるんでしょうけど。 でも実際はこ ...

-テクニック
-, ,

Copyright© ソフトウェア開発日記 , 2017 AllRights Reserved.