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

css

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

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

動作デモ

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

コードを確認

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>

注意点

モーダルウィンドウを閉じるボタンにはFont AwesomeのWebアイコンを使用しています。
必要でしたら以下からコードを取得してください。閉じるボタンに独自のボタンを設定しても良いかもしれません。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

また、breakpointは1023pxです。これも必要に応じて値を変更した方が良いかもしれません。。

まとめ

シンプルなモーダルウィンドウなので、aタグをクリックしたらデフォルトのイベントをキャンセルし、表示する要素を作成して表示させているだけです。
ギャラリー表示はできないし、動画表示にも対応していません。

それでもコードをコピペすれば使えるので、ちょっとした実装には使えるかもしれません。

コメント