mgn-modal

jQueryを必要としないモーダルウィンドウのライブラリです。

https://github.com/frontend-isobar-jp/mgn-modal

Default


let modal = new mgnModal(".j-modal");

Image

img.jpg

img2.jpg


<a href="images/img.jpg" class="j-modal">Youtube</a>

Youtube

youtube


<a href="https://youtu.be/[youtube video id]" class="j-modal">Youtube</a>

Inner HTML

Inner HTMLの内容が入ります。
Inner HTMLの内容が入ります。
Inner HTMLの内容が入ります。
Inner HTMLの内容が入ります。
Inner HTMLの内容が入ります。
Inner HTMLの内容が入ります。


<a class="j-modal">Inner HTML</a>
<div class="j-modal_detail">Inner HTMLの内容が入ります。</div>

Outer HTML

Outer HTML iframe


<a href="modal_inner.html" class="j-modal">Outer HTML</a>

<a href="index.html" class="j-modal" data-modalType="iframe" data-modalHeight="600px"> Outer HTML iframe</a>

横幅指定

80%

900px


<a href="modal_inner.html" class="j-modal" data-modalWidth="90%">80%</a>

<a href="modal_inner.html" class="j-modal" data-modalWidth="900px">900px</a>

Option


new mgnModal(
    ".j-modal2",
    {
        width: 768,
        modalSpeed: 200,
        bgColor: "#CCC",
        bgOpacity: 0.9,
        innerBgColor: "#CCC",
        innerBgPadding: 40,
        closeBtn: "Close",
        closeCancel: false,
        addClass: "",
        fixed: true
    }
);

img.jpg

img2.jpg