JSでモーダルダイアログなポップアップを出すやつ

モーダルウインドウ出すやつで良いのがない。

jQuery に依存してたり、細かなイベントが取れなかったり、設定が煩雑だったり、もっと簡単に出来るだろう。と思ってたけど

ネット探して片っ端から試したけど、これ。というのがない。

仕方ないので作った。画像を真ん中に寄せたり、要素を真ん中に寄せてポップアップするのにどれだけ苦労したら良いんだ。。。 そもそも画像のモーダルウインドウのポップアップってあんまり好きじゃないのですよね。

要は、画像をクリックして拡大したり、画面の orientation（向き）を変えても追従してくれたり、画面をリサイズしても追従してくれたり、ちゃんと真ん中でてくれて、jQueryを不要なやつで、DOM API のちょっと古いやつでも動くやつ*1がほしいわけです。

それも、画像じゃなくて指定したElementをポップアップさせたいわけですよ。

サンプル

↓画像をクリックして拡大

使い方

拡大したい要素に、data-modal-image 属性を追加する。

<div style='width:150px'>
<img src='path/to/image' data-modal-image >
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
       var md = new ModaLayer({});
       md.add_lisnters();
})
</script>

指定した要素をポップアップするので、Width指定すると意図しない動作になることが有るのでdivで囲っておくと良い。

modal.js

gist.github.com

*1:などと言いつつflexbox使ってますが