いつもWebPageを作るとき、単純に alert("何何何何"); を使った事あるでしょ！
あれはWindowのデフォルトのもので何もコントロールが出来ないので、つまらないでしょうね？
ダイログの形も、色も、サイズも、ヘッダーのキャップションも変えることも出来ないですね。
インターネットで他のLibralyをDownloadして使ってみても、自分のWebPageとぴったり似合うではないし、
そのLibralyの使い方を理解するように勉強しないと！
それまでやるなら、自分のDialog Libraryを作ったほうがいいじゃないか！
と思ってるので、作ってみました。
WASIdia の使い方
１．ルートフォルダーに「WASIdia.js」、「WASIdia.css」と "jquery-x.x.x.js" （バーション未確認、何でもいいと思います）を置きます。
(animation も入れたい場合「animate.css」も必要です。 )
２．htmlページの <header> に以上のファイルをインポートします。
例：
<head>
<title>WASI dialog</title>
<meta charset="utf-8">
<link href="css/WASIdia.css" rel="stylesheet" />
<link href="css/animate.css" rel="stylesheet" />
<script src="js/WASIdia.js"></script>
<script src="js/jquery-2.2.3.js"></script>
</head>
３．<body> の中に <div id="WASIdia"></div> を設置する （ダイログを表示するオブジェクト）
例：
<body>
<div id="WASIdia"></div>
...
...
</body>
4.actionがある時にダイログのfunctionを呼ぶ
★アラート(alert)
WASIalert("アラートのタイトル","アラートの内容");
or
//animationのクラス名を追加
WASIalert("アラートのタイトル","アラートの内容","fadeInDown");
結果
★確認ダイアログ（Confirm）
WASIconfirm("アラートのタイトル","アラートの内容");
OK.click(function(){
//OKボタンを押された後何かをする
})
結果
★入力要求ダイアログ（Prompt）
WASIprompt("アラートのタイトル","アラートの内容");
OK.click(function(){
//OKボタンを押された後、入力されたメッセージを取得する
var myText = TEXT.val();
//貰ったメッセージを何かする
});
結果
WASIdiaの操作は どんな風にやってる？
ダイアログの本体は HTML で作ります。
funtionの中でダイアログのHTMLを組成し、貰ったメッセージを入れて、本ページの <div id="WASIdia"></div> の所に置き換えます。
例：
function WASIalert(title,msg,animate){
target = getTarget();
//本ページにダイアログを表示するオブジェクトが設置されているかどうかをチェック。
if(target){
dialogBody=replaceText(dialogBody_alert,title,msg,animate);
//貰ったメッセージを入り換える。
target.innerHTML=bgBlackdrop+dialogBody;
//ダイアログを表示するオブジェクトに出来上がったコードで置き換える
lockScroll();
//画面をscroll出来ないようにする
}
}
ダイアログの操作が完了する時、<div id="WASIdia"></div> の所を元に戻します。
例：
function WASIclose(){
getTarget().innerHTML="";
$('body').removeClass('noscroll');
}
ダイアログの本体にちゃんとCSS styleを入れますね。
ダイアログのCSSのポイント！
.wsDialog{
position:fixed;
/*重要：他のオブジェクトの位置に無視、このclassで決めた位置になる*/
z-index:9999;
/*重要：他のオブジェクトの一番上のレーヤーになる*/
width:80%;
left: 50%; /*重要：真ん中にする*/
margin-left:-40%; /*重要：真ん中にする*/
background-color:white;
color:black;
box-shadow:1px 1px 3px grey;
border-radius:10px;
padding:2%;
}
これだけで簡単にWASIdiaのダイログを利用できますね。
軽くanimation class も入れた見れば色んな面白い動き方が出来ます。 （animation class名はanimation.cssに参考）
Thanks for animate css from
https://daneden.github.io/animate.css
