ライブラリ依存なしで簡単に使えるmodalプラグイン「Remodal」

bootstrapやFoundation等のCSSフレームワークが普及してから、
tooltipやmodalなどのWebコンポーネントが身近になりました。

上記のようなCSSフレームワークを導入していたら簡単に使うことが出来るのですが、
「modalを使う為だけにワザワザ導入するのもな。。」
っというシーンに最適なmodalプラグインが「Remodal」です。

Remodal
 

RemodalはjQueryや他のライブラリの依存がなく、
他のjavascripやCSSのプラグインとも簡単に連携が可能です。
( 例: ボタンやフォームにBootstrapのスタイルを適用も問題なく可能 )

そして、設定や初期化用のJavascriptを書かずに使用出来ます。

使い方はとにかく簡単！
Remodalのライブラリを読み込んで 呼び出し用のボタンとモダールのhtmlコードを書くだけです。

* ライブラリ

<!-- CDNをサンプルの為に使っています -->

<!-- CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal-default-theme.min.css" rel="stylesheet" type="text/css" media="all"/>

<!-- javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.js" type="text/javascript"></script>

* モーダル側のコード

<!--　呼び出し用のボタン -->
<!--  data-remodal-id="modal"が呼び出される -->
<a href="#modal" class="btn btn-default">Modalデモ</a>

<!-- Modal本体 -->
<!-- ボタンが押されると呼び出される -->
<div class="remodal" data-remodal-id="modal">
  <!-- クローズボタン -->
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <!-- your content -->
  <p>
    Remodalテスト
  </p>
  <p>
    Write something.
  </p>
  <br>
  <!-- キャンセルボタン -->
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <!-- サブミットボタン -->
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

html5からサポートされたdata属性をid代わり使っているので、
htmlコード内のid名の重複も心配ありません。

ページをコンパクトにしたい時に重宝するので、筆者もWeb開発の際にはModalをよく使っています。
( 例: 管理システム等でパート毎に編集したい時など )

デモページにサンプルとコードも載せていますので、是非Remodalをチェックしてくみてください！

Remodalデモ