モーダルプラグイン「Remodal」で簡単にモーダルウィンドウを実装する方法

モーダルウィンドウを手軽に実装したいとき、「Remodal」を使うと簡単に実装できたので実装メモを残しておきます。
あまりごちゃごちゃしてないので、カスタマイズ性も高そう∠( ﾟдﾟ)／

モーダルプラグイン「Remodal」の使い方

まずは「Remodal」をダウンロードしてきます。

「Download」をクリックするとGitHubに飛ばされるのでそこからダウンロードします。

動作に必要なファイルは３つ！

・remodal.css
・remodal-default-theme.css
・remodal.min.js

これらをHTMLで読み込みます。
このプラグインは、ｊQueryを使用するので、必ずｊQueryも読み込んでください。

動作するように早速HTMLを書いていきます。

<a href="#modal_a">ボタン</a>

<div data-remodal-id="modal_a">コンテンツ</div>
<div data-remodal-action="close">閉じる</div>

・まずaタグにモーダルさせたい要素のIDを指定します。
・モーダルさせる要素に「data-remodal-id」で同じIDを指定します。
これで、ボタンを押したらモーダルの完成！

「data-remodal-action=”close”」を使うことで好きなように閉じるボタンも設定できるので必要な際は設定してください。

最低限の設定はこれで終わり！
オプションで、いろいろいじれますが詳しくはremodalのGitHubで！