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

スポンサーリンク

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

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

注意事項

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

JavaScript
スポンサーリンク
色白おばけをフォローする

おすすめプログラミングスクール

「侍エンジニア塾」は、未経験者でも結果が出せるプログラミング学習サービスです。
専属のインストラクターとの対面かSkypeでのレッスンを通じてプログラミングスキルを身につけて頂き、就職や転職までサポートします。
「侍エンジニア塾」の『3つ』の大きな特徴

  1. 完全マンツーマンレッスン
  2. フルオーダーメイドカリキュラム作成
  3. 独立・起業・フリーランス支援

誰もが自分の技術で稼げる人材になるための教育プログラム
TECH::EXPERTのこだわりは「実務的な教育コンテンツ」と「徹底したサポート体制」の2つです。

  1. 現場で使える実践的な技術が身につく
    有名企業のエンジニアへヒアリングを重ね、1年かけて創り上げた教育プログラムがあなたを実務レベルの即戦力エンジニアへ高めます
  2. 学習方法はライフスタイルに合わせて学べます
    ・一気にエンジニアへ駆け上がる「短期集中スタイル」
    ・無理なく確実にエンジニアへ「週末集中スタイル」
    ・自分のペースで自由に学ぶ「オンラインスタイル」

TECH::CAMP(エンジニアスクール)。
【Webアプリケーションコース】
全くの未経験からWebアプリケーション開発に必要なスキルを全て学ぶことができます。
【iPhoneアプリコース】
全くの未経験から最新の開発言語Swiftを用いてiPhoneアプリ開発を学ぶことができます。
自分だけのiPhoneアプリつくって世界に向けてリリースしたい方には自信を持っておすすめできる内容です。

ソフトウェア開発日記
タイトルとURLをコピーしました