SmartPad4iのポップアップ機能は、Designerで縦位置、横位置をピクセル単位で指定して表示位置を決定します。
縦位置、横位置は固定の数値となるため、画面のサイズに合わせて動的に表示位置を変更する場合には少し工夫が必要です。
今回のTipsでは、SmartPad4iのポップアップを画面中央に表示する方法をご紹介します。
SmartPad4iのポップアップ機能
SmartPad4iのポップアップ機能は、IBMiプログラム(AS/400)のポップアップ機能のように、呼び元画面を残した状態で、次の画面を表示する機能です。
例えば、マスタ一覧からレコードを選択する画面などで使用されます。
ポップアップ機能は、SmartPad4i Designerの設定だけで簡単に使用できます。
Desginerでは、右上の「新規ウインドウを開きますか？」にチェックを選択すると、ポップアップ機能の設定が表示されます。
設定では、「X」で横位置、「Y」で縦位置を設定できます。
ポップアップ設定では、横位置、縦位置が固定の位置となります。
そのため、画面のサイズに合わせて動的に位置を変更する場合には、工夫が必要です。
Tipsでは、cssを設定することでポップアップ画面を画面中央に表示する方法についてご紹介します。
ポップアップ画面を中央に表示
例では、ポップアップ呼び出し画面(SMP010.html)、ポップアップ画面(POP.html)を使用して説明します。
ポップアップ呼び出し画面(SMP010.html)には、ポップアップ画面(POP010.html)を呼び出すボタンと、アプリを終了するボタンの2つを設定しています。
ポップアップ画面(POP010.html)には、ポップアップ画面を終了するためのボタン1つを設定しています。
ポップアップ呼び出し画面(SMP010.html)
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>ポップアップ呼び出し元</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
</head>
<body>
<form method="post">
<input id="BTN01" type="button" value="ポップアップ表示"><hr/>
<input id="BTN02" type="button" value="終了">
<div style="height:1200px;width:100%">
</div>
</form>
</body>
</html>ポップアップ画面(POP010.html)
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>ポップアップ画面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
</head>
<body>
<form method="post">
<input id="BTN01" type="button" value="ポップアップ閉じる"><hr/>
</form>
<style>
.POP{
background-color:#000000;
padding:8px;
}
</style>
</body>
</html>通常の表示位置
SmartPad4iの通常動作では、Designerで設定した表示位置が適用されます。
X:200 , Y:300 で設定した場合には、横位置200 , 縦位置300 のように固定位置でポップアップ画面が表示されます。
SmartPad4iのポップアップ画面は、cssの設定では、position:absolute;left:200px;top:300pxのように絶対値指定となるためです。
画面中央に表示するcss設定
ポップアップ画面を画面中央に配置するには、leftとtopの位置をcssのcalc関数を使用して計算します。
◆calc()
https://developer.mozilla.org/ja/docs/Web/CSS/calc
横位置の設定
例えば、今回のサンプルのように、幅:500px ,高さ:400pxに設定している場合、横位置を画面の中央にするには以下のようなcss設定になります。
.POP {
left: calc(50% - 250px) !important;
}leftは横位置のcss設定です。
calcを使用すると、計算で値を設定することができます。
横位置50%から、幅500pxの半分である250pxを引くことで画面中央に配置しています。
また、ポップアップ画面のタグ自体に、left設定が設定されているため、left設定を上書きするために、!importantを設定してcssを適用しています。
縦位置の設定
次に、縦位置を調整します。
高さ:400pxに設定している場合、縦位置を画面の中央にするには以下のようなcss設定になります。
.POP {
left: calc(50% - 250px) !important;
top: calc(50% - 200px) !important;
}topは縦位置のcss設定です。
縦位置50%から、高さ400pxの半分である200pxを引くことで画面中央に配置しています。
left設定と同じで、top設定を上書きするために、!importantを設定してcssを適用しています。
以上で、ポップアップ画面の縦、横位置をスクリーンの中央に設定できます。
位置固定設定
ポップアップ呼び出し画面が縦に長いコンテンツで縦スクロールをした場合、画面中央に表示したポップアップ画面は移動しないため、ポップアップ画面が表示されなくなります。
cssの設定で表示したポップアップ画面が常に真ん中に表示されるように設定することも可能です。
.POP{
left: calc(50% - 250px) !important;
top: calc(50% - 200px) !important;
position: fixed !important;
}positionをfixedに設定すると、要素の位置は画面上で固定されます。
つまり、画面中央に固定される状態となります。
おわりに
5250のアプリケーションでは、画面の縦、横幅が決まったサイズとなるため問題ありませんが、Web(html)の場合は、ブラウザのサイズを変更できます。
動的にポップアップ画面の位置を設定したい場合は是非ご活用ください。