軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリ・「WinBox.js」

Ads

WinBox.js


WinBox.jsは軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリです。

クリックで開かせることも可能ですが、今回は既に開いた状態のサンプルを用意しました。

Ads
<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