jQueryプラグインのBoxerを試してみる

JavaScript

jQueryプラグインのBoxerを試してみる。

Boxer
http://formstone.it/components/boxer

※バージョンは3.3.0を使用。

設置

ファイルを下記のような感じで設置。

├ HTMLファイル
├ jquery.fs.boxer.min.css
├ jquery.fs.boxer.min.js
└ sample.png

基本

基本的にHTMLは下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="jquery.fs.boxer.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.fs.boxer.min.js"></script>
<script>
  $(function(){
    $(".boxer").boxer();
  });
</script>
</head>
<body>
  <a href="sample.png" class="boxer" title="Caption">モーダル</a>
</body>
</html>

デモ

インライン

インラインにも対応している。

・・・
  <a href="#sample" class="boxer">モーダル</a>
  <div id="sample" style="display: none;">
      <div class="content">
        コンテンツ<br>
        ・・・<br>
        ・・・<br>
        ・・・<br>
        ・・・<br>
        ・・・<br>
        ・・・<br>
        ・・・<br>
        ・・・<br>
      </div>
  </div>
・・・

デモ

iframe

iframeも表示できる。
※ただ、スタイルで高さを指定しないとうまく表示されないかった。

・・・
  <style>
    .boxer-content {
      height: 600px;
    }
  </style>
  <a href="http://www.hatena.ne.jp" class="boxer" data-boxer-width="800" data-boxer-height="600">モーダル</a>
・・・

デモ