Remodalライブラリを使ってモーダルウインドウを表示する方法

Remodalライブラリを利用して、モーダルウインドウを表示する方法をご紹介します。

Remodalとは

リッチなモーダルウインドウを簡単に表示できるjqueryライブラリです。

Remodalの導入手順

モーダルを表示させるところまでやってみます。
※全体のソースコードは、導入手順の一番下に記載しています。

①Remodal-◯.◯.◯.zipをDLします。

※2019/6/17時点の最新版は、v1.1.1です。

1.公式サイトのDownloadリンクをクリックします。
http://vodkabears.github.io/remodal/

2.GitHubページ内のSource code(zip)をクリックすると、Remodal-◯.◯.◯.zipがDLされます。

②Remodalを読み込みます。

<link rel="stylesheet" href="remodal/dist/remodal.css">
<link rel="stylesheet" href="remodal/dist/remodal-default-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="remodal/dist/remodal.min.js"></script>

jquery必須です。

③本体のhtmlを用意します。

<div class="remodal-bg">
    <a href="#modal">モーダルを開く</a>
</div>

href属性にdata-remodal-id属性の値を指定します。

以下のように、data-remodal-target属性で指定することもできます。

<a data-remodal-target="modal">モーダルを開く</a>

<button data-remodal-target="modal">モーダルを開く</button>

④Remodal表示部分のhtmlを用意します。

<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>モーダルのタイトル</h1>
    <p>モーダルの本文</p>
    <br>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancelボタン</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OKボタン</button>
</div>

以上で準備完了です。
③で作成した、「モーダルを開く」リンクをクリックすると、④で作成したモーダルが表示されます。

Remodalを表示する全体のソースコード

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Remodal</title>
    <!-- Remodalの読み込み -->
    <link rel="stylesheet" href="remodal/dist/remodal.css">
    <link rel="stylesheet" href="remodal/dist/remodal-default-theme.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="remodal/dist/remodal.min.js"></script>
</head>
<body>
<div class="remodal-bg">
    <a href="#modal">モーダルを開く</a>

    <!-- こちらでも可 --->
    <a data-remodal-target="modal">モーダルを開く</a>
</div>
<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>モーダルのタイトル</h1>
    <p>モーダルの本文</p>
    <br>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
</body>
</html>

Remodalのフォームデータの送信

Remodal内にフォームを作成して、データ送信してみます。

※全体のソースコードは、一番下に記載しています。

①Remodalのhtmlにデータを送信するフォームを追加します。

<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>フォーム送信テスト</h1>
    <form action="sample.php" method="post" id="form_id">
        <label>テキストを入力してください。</label>
        <input type="text" name="sample_text">
  
        <br><br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </form>
    <br>
</div>

②送信データを表示するsample.phpファイルを作成する。

sample.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>フォームからPOSTで送信されたデータを表示するページ</title>
</head>
<body>
    <h1>出力ページ</h1>
    <?php
        echo "入力されたテキストは、" . htmlspecialchars( $_POST["sample_text"], ENT_QUOTES, "UTF-8" ) . "です。";
    ?>
</body>
</html>

③RemodalのOKボタンからsubmitできるようにする。

Remodalで用意されているイベント「confirmation」を利用します。

// Remodalのオブジェクトを取得
var remodal = $('[data-remodal-id=modal]').remodal();

// OKボタンが押されたときに発火するイベント
$(document).on('confirmation', remodal, function () {
    $('#form_id').submit();
});

以上で完成です。

全体のソースコード

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Remodal</title>
    <!-- Remodalの読み込み -->
    <link rel="stylesheet" href="remodal/dist/remodal.css">
    <link rel="stylesheet" href="remodal/dist/remodal-default-theme.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="remodal/dist/remodal.min.js"></script>
    <!-- 自分で作成したjsファイル -->
    <script src='remodal.js'></script>
</head>
<body>
<div class="remodal-bg">
    <a href="#modal">モーダルを開く</a>

    <!-- こちらでも可 --->
    <a data-remodal-target="modal">モーダルを開く</a>
</div>
<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>フォーム送信テスト</h1>
    <form action="sample.php" method="post" id="form_id">
        <label>テキストを入力してください。</label>
        <input type="text" name="sample_text">
  
        <br><br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </form>
    <br>
</div>
</body>
</html>

sample.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>フォームからPOSTで送信されたデータを表示するページ</title>
</head>
<body>
    <h1>出力ページ</h1>
    <?php
        echo "入力されたテキストは、" . htmlspecialchars( $_POST["sample_text"], ENT_QUOTES, "UTF-8" ) . "です。";
    ?>
</body>
</html>

remodal.js

$(function () {
    // Remodalのオブジェクトを取得
    var remodal = $('[data-remodal-id=modal]').remodal();

    // OKボタンが押されたときに発火するイベント
    $(document).on('confirmation', remodal, function () {
        $('#form_id').submit();
    });
})

実際に動かしてみます。
①モーダルにテキストを入力して、OKボタンを押します。

②フォームからPOSTで送信されたデータが表示されました。

参考サイト

◯Remodalの公式サイト
http://vodkabears.github.io/remodal/

◯RemodalのGitHub
https://github.com/VodkaBears/Remodal#remodal

この記事をシェアする：

◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇

私たちと一緒に働きませんか？

「Remodalライブラリを使ってモーダルウインドウを表示する方法」はいかがでしたか？
株式会社プレスマンでは、 WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

採用情報を見る