WinBox.js
WinBox.jsは軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリです。
クリックで開かせることも可能ですが、今回は既に開いた状態のサンプルを用意しました。
< script src = "winbox.bundle.js" defer></ script > |
今回はオールインワンのbundle版を使いました。サンプルでは以下のコードで実装しています。
var node = document.getElementById( "content" ); new WinBox( "サンプルです" , { background: "#ff005d" , border: "0 1em 15px 1em" , x: "center" , y: "center" , width: "50%" , height: "50%" , mount: node }); |
タイトルや背景色、ボーダーサイズや配置場所を決め、内容はid="content"
のクローンとなっています。
< div id = "backstore" style = "display: none" > < div id = "content" > < h1 >サンプル</ h1 > < p >サンプルサンプル</ p > </ div > </ div > |
ウィンドウ内に表示するのでHTMLは非表示設定になっています。
見た目は勿論、内容を任意のコンテンツにしたり特定のURLにしたり、初期の配置場所など細かいところまで応用が利き、軽量で他ライブラリに依存しません。
ドラッグで動かせるのでよくあるモーダルウィンドウとは別の使い方が出来そうですね。ライセンスはApache-2.0との事です。