2017年10月19日(木)
[JavaScript] ダイアログ #HTML5&CSS3&JavaScript

　JavaScriptでダイアログを表示するのに、次の３つのメソッドが用意されています。

--
// 警告ダイアログ
alert("表示テキスト");

// 確認ダイアログ
$srt = confirm("表示テキスト");

// 文字入力ダイアログ
$str = prompt("表示テキスト","入力フィールド内テキスト");
--

　prompt()を利用しても、入力フィールドは１つだけです。１つのダイアログで、ユーザ名とパスワードのように２つの入力フィールドがあるダイアログは用意されていません。その場合、prompt()を２回発動させるのが定番です。

　試験的に、showModalDialog()なるメソッドもありましたが、廃止されて使えません。

　HTML5.1では、<dialog></dialog>が用意されています。しかし、現在対応しているのは、Google ChromeとOperaだけで、Firefoxは試験対応、SafariとEdgeとIEは未対応でした。現時点では、使えませんね。

　ならば、勝手に都合の良いダイアログを<div></div>で作っちゃいましょう。勘のいい方なら気づかれたでしょうが、style.displayの切り替えで、表示／非表示を利用します。

　ダイアログを常に中央ちょっと高めに表示するのに、ちょっとしたテクニックを使用しています。

<style>
#id_dialog {
  position:fixed;
  margin-left:-142px;
  margin-top :-152px;
  top :50%;
  left:50%;
  width :240px;
  height:260px;
  padding:0px 16px;
  border:solid 6px orange;
}
</style>


P.S. ダイアログ<div></div>を最前面で表示させるのに、一番下に記述しなければならないのかと思ったら、必要ありませんでした。多分、position:fixed;が、position:static;（初期値）より、前面になるというルールですね。


P.S.2 ダイアログの枠線が、浮き上がり(outset)だと、Safari、Chrome、Opera以外は、濁色になってしまいます。直線(solid)にして、影を付けることにしました。角丸(border-radius)も影(box-shadow)も、IE11を含むすべてのブラウザで、ＯＫ。

--
border:outset 6px orange;
　↓
border:solid 6px orange;
border-radius:24px;
box-shadow:3px 3px 6px;
--


P.S.3 先のセッションテストに、このダイアログを組み込んでみます。最終的には、『子猫の手 [Network Communication Note]』で利用します。


P.S.4 無いものは、ある材料で作るのがプログラミングの醍醐味。ようやく、Web環境でプログラム言語が整い、何でもプログラミングできるようになってきた感じがします。でも、流行りは、スマホアプリですね。勉強すれば、出来る難易度なのですが、先立つものがないとね。
http://neconote.jp/prg/dialog.html