jQueryプラグイン「remodal.js」を使ったモーダルウィンドウです。
モーダルウィンドウは、ページのレイアウトの省スペース化ができるデザイン手法の一つです。
複数あるコンテンツ・トピックの、詳細な情報を表示するスペースを、モーダルウィンドウを使って表示することができます。
またページ遷移をせずに、見ている画面上に表示されるウィンドウなので、各ページを行ったり来たりせずに、内容を伝えることができます。
他にも、ページの表示させた時に現れるアラート系や、案内系、広告系で使用されることもあります。
ただ、これらはユーザーの操作を妨げる行為にも繋がりかねないので、使用する際は注意が必要です。
モーダルウィンドウのデモ
下のボタンでデモを表示することができます。
See the Pen 18-2 by Rayout-gw (@Rayout-gw) on CodePen.
デモページを作成して、いろいろアレンジしながら仕組みを理解していきましょう。
必要なタグや、モーダルウィンドウの表示ができるのを確認してから、猫カフェのページなどでも同じようにチャレンジしてみましょう。
作成手順
web制作
chap18（フォルダを作成）
modal-demo（モーダルウィンドウ用のフォルダを作成）
demo.html（デモページを作成）
必ずデモページを作成してから、自分が作成するページで使うとミスが減ります
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal-default-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script><script>は、javascriptファイルを読み込む時に使います。
必ず、jQueryライブラリを先に読み込みましょう。
オフラインでも表示するには、各ファイルをDLする必要があります。
<!-- クリックする部分 -->
<p><a href="#modal">テキスト文章を開く</a></p>
<!-- モーダル表示する部分 -->
<div class="remodal" data-remodal-id="modal">
<p>テキスト文章が表示される</p>
<!-- 閉じるボタン -->
<button data-remodal-action="close" class="remodal-close"></button>
</div>2行目の文章はテキストリンクになります。
リンクをクリックすると、6行目の文章が表示されます。
2行目のhref属性と5行目のdata-remodal-id属性の値が、一致しないと表示されません。
・data-remodal-id属性の値を変えれば、複数設置できる
・「モーダル表示する部分」の<div>内は、画像や文章を使って表示することができる
・「モーダル表示する部分」のデザインは、<div>にid名やクラス名をつけてデザインできる
・「閉じるボタン」の部分は、そっとしておく
<div class=”modal クラス名”>というように、class属性には複数のクラス名を追加して記述できます。
複数のクラス名は「半角スペース」で区切りましょう。
動画を表示する場合
<!-- クリックする部分 -->
<p><a href="#modal-video">テキスト文章を開く</a></p>
<!-- モーダル表示する部分 -->
<div class="remodal" data-remodal-id="modal-video">
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2GsTJdDBMf4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- 閉じるボタン -->
<button data-remodal-action="close" class="remodal-close"></button>
</div>動画を表示する場合は、7行目に<video>またはYoutubeのコードを貼り付けるといいです