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デモ