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

JavaScript

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

Remodal
http://vodkabears.github.io/remodal/

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

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

├ index.html
├ jquery.remodal.css
└ jquery.remodal.js

HTMLは下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="jquery.remodal.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.remodal.js"></script>
</head>
<body>
  <div class="remodal-bg">
    <a href="#modal">モーダル</a>
  </div>
  <div class="remodal" data-remodal-id="modal">
      <h1>タイトル</h1>
      <p>
        Hello, world!
      </p>
      <br />
      <a class="remodal-cancel" href="#">Cancel</a>
      <a class="remodal-confirm" href="#">OK</a>
  </div>
</body>
</html>

デモ