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との事です。

WinBox.js