jQuery/Vanilla Javascript

【jQuery】簡単に実装できる時短モーダルウィンドウ「Remodal」

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
remodal

今回はモーダルウィンドウを簡単に実装できるRemodalの使い方を解説します。
モーダルウィンドウプラグインとしてはModaalやMagnific Popupのほうが利便性が高くあまりRemodalを使用する機会がなかったのですが、改めて確認するとjsのパラメータ設定をしなくてもタグの属性設定のみで動かせるという利点があります。
「時間がない」「そこまで立派なモーダルはいらない」という場合には適しているプラグインといえます。

公式サイト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を使えば本の数分で実装できてしまうほど簡単なので是非試してみてください。

uhaha

昔はLightBox風プラグインとかいってfuncybox、colorboxとか使ってたなぁ。今は便利ですね~

関連記事

【Modaal】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方

【Magnific Popup】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*