プラグインを使わずにモーダルウィンドウを作成しました【JavaScript/CSS】

JavaScriptの練習で簡単なモーダルウィンドウを作成しました。
表示する要素にテキストや画像を指定できますが動画には対応しておりません、、。
プラグインを使うほどではない時の実装に使えそうなのでメモ。

完成したモーダルウィンドウを確認する（デモ）
コードを確認
使用方法
1. HTML
2. 注意点
まとめ

完成したモーダルウィンドウを確認する（デモ）

動作デモ

実際の動作はこちらでご確認ください！（別ウィンドウが開きます）

デモを確認する

コードを確認

See the Pen modalwindow by donguri2020 (@m-ke) on CodePen.

全体のコードはCodePenでご確認ください。

使用方法

HTML

リンク元に設定できるのはaタグのみです。
href属性に表示させたいid要素、または画像のURL、classに「modalBtn」を指定します。

<!--  リンク下の設定 -->
<a href="#information" class="modalBtn">テキストを表示する</a><br>
<a href="https://m-kenomemo.com/sample/modal-window/images/photo01.jpg" class="modalBtn">画像(横)を表示する</a><br>
<a href="https://m-kenomemo.com/sample/modal-window/images/photo02.jpg" class="modalBtn">画像(縦)を表示する</a>

モーダルでテキストを表示する場合、任意のidとclass「modalInclude」を指定します。

<!-- モーダルウィンドウで表示するテキスト -->
<div id="information" class="modalInclude">
    <div class="guide">
    <h3 class="h-ttl j-serif">インフォメーション</h3>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <div class="mt30">
        <img src="https://m-kenomemo.com/sample/modal-window/images/photo01.jpg" style="float:right;padding:0 0 10px 10px;width:30vw">
    </div>
    <ul class="list arrow-red pl20">
        <li class="mt10">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
        <li class="mt10">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </li>
        <li class="mt10">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </li>
        <li class="mt10">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>

    <p class="mt10">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="mt10">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p class="mt10">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>