ds-modal

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

https://github.com/dsflon/ds-modal

Default


let modal = new DsModal(".modal");

Image

img.jpg

img2.jpg


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

Youtube

youtube


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

Inner HTML

Inner HTML


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

Outer HTML

Outer HTML

Outer HTML iframe


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

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

横幅指定

80%

900px


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

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

Option


new DsModal(
    ".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