今回はモーダルウィンドウを簡単に実装できるRemodalの使い方を解説します。
モーダルウィンドウプラグインとしてはModaalやMagnific Popupのほうが利便性が高くあまりRemodalを使用する機会がなかったのですが、改めて確認するとjsのパラメータ設定をしなくてもタグの属性設定のみで動かせるという利点があります。
「時間がない」「そこまで立派なモーダルはいらない」という場合には適しているプラグインといえます。
Remodalの設定
ソースコード取得
公式サイトREMODALのダウンロードページよりソースを取得します。
CDNを使用する場合ははこちらです。
cdnjs remodal
読み込み
jQueryライブラリも含め以下のように読み込みます。
<link href="css/remodal.css" rel="stylesheet" type="text/css">
<link href="css/remodal-default-theme.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/remodal.js"></script>基本設定
data-remodal-id="modal"で紐づけします。
ポップアップするモーダルウィンドウ部分はインラインで記述します。
<!-- ボタン -->
<a href="#modal" class="btn">sample</a>
<!-- remodal_start -->
<div class="remodal" data-remodal-id="modal">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
レスポンシブ、軽量、高速、CSSアニメーションと同期、完全にカスタマイズ可能なモーダルウィンドウプラグイン。
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
<!-- remodal_end -->モーダルウィンドウを複数にする場合はIDを変えるだけでOKです。
<a href="#modal1" class="btn">sample</a>
<!-- remodal_start -->
<div class="remodal" data-remodal-id="modal1">
<button data-remodal-action="close" class="remodal-close"></button>
<h4 class="tit_middle">modal1</h4>
<p>
modal1
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
<!-- remodal_end -->
<a href="#modal2" class="btn">sample</a>
<!-- remodal_start -->
<div class="remodal" data-remodal-id="modal2">
<button data-remodal-action="close" class="remodal-close"></button>
<h4 class="tit_middle">modal2</h4>
<p>
modal2
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
<!-- remodal_end -->サイトアクセス時モーダルウィンドウを開く
重要な情報を掲載する際などによくみられるサイトアクセス時にモーダルウィンドウを開く方法です。
jsでページロード時に指定IDbtn1のボタンをクリックする用に記述します。
<script>
window.onload = function () {
document.getElementById( "btn1" ).click();
}
</script>ボタンには紐づけ用のIDbtn1を付与しておきます。
<a href="#modal1" class="btn" id="btn1">sample</a>まとめ
remodalは初期のレスポンシブ対応型モーダルウィンドウの印象が強いです。
cdnを使えば本の数分で実装できてしまうほど簡単なので是非試してみてください。
昔はLightBox風プラグインとかいってfuncybox、colorboxとか使ってたなぁ。今は便利ですね~
関連記事
【Modaal】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方
【Magnific Popup】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方
コメント