iframeでもHTMLでも対応できる超軽量で非依存のLightboxスクリプト

Result

こういうベーシックなもの最近は全く見かけなくなりましたけど・・案件になると割と要望は頂くんですよね。というわけで、重めなライブラリを読み込みたくない、でもLightboxでその場に何か表示したい、みたいな用途に便利そうだったのでメモ。

2kb以下でバニラ、且つiframeだろうがHTMLだろうが画像だどうが何でも対応できる、みたいなの。軽量にするためエフェクトも加えられていないので必要なら加えてください

javascript

4年前から更新されてないので書き方がちょっと古めです。使う時は直して使うと良いんじゃないでしょうか

/*|--uglipop.js--|
|--(A Minimalistic Pure JavaScript Modal )--|
|--Author : argunner (gunnerar7@gmail.com)(http://github.com/argunner)--|
|--Contributers : Add Your Name Below--|*/

window.onload = function() {

    var overlay = document.createElement('div');
    var content_fixed = document.createElement('div');
    var popbox = document.createElement('div');
    var overlay_wrapper = document.createElement('div');
    content_fixed.id = 'uglipop_content_fixed';
    content_fixed.setAttribute('style', 'position:fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);opacity:1;');
    popbox.id = 'uglipop_popbox';
    overlay_wrapper.id = "uglipop_overlay_wrapper";
    overlay_wrapper.setAttribute('style', 'position:absolute;top:0;bottom:0;left:0;right:0;');
    overlay.id = "uglipop_overlay";
    overlay.setAttribute('style', 'position:fixed;top:0;bottom:0;left:0;right:0;opacity:0.3;width:100%;height:100%;background-color:black;');
    overlay_wrapper.appendChild(overlay);
    content_fixed.appendChild(popbox);
    document.body.appendChild(overlay_wrapper);
    document.body.appendChild(content_fixed);
    document.getElementById('uglipop_overlay_wrapper').style.display = 'none';
    document.getElementById('uglipop_overlay').style.display = 'none';
    document.getElementById('uglipop_content_fixed').style.display = 'none';
    overlay_wrapper.addEventListener('click', remove);
    window.addEventListener('keypress', function(e) {
        //kill pop if button is ESC ;)
        if (e.keyCode == 27) {
            remove();
        }
    });
}

function uglipop(config) {

    if (config) {
        if (typeof config.class == 'string' && config.class) {
            document.getElementById('uglipop_popbox').setAttribute('class', config.class);
        }
        if (config.keepLayout && (!config.class)) {
            document.getElementById('uglipop_popbox').setAttribute('style', 'position:relative;height:300px;width:300px;background-color:white;opacity:1;');
        }

        if (typeof config.content == 'string' && config.content && config.source == 'html') {
            document.getElementById('uglipop_popbox').innerHTML = config.content;
        }

        if (typeof config.content == 'string' && config.content && config.source == 'div') {

            document.getElementById('uglipop_popbox').innerHTML = document.getElementById(config.content).innerHTML;

        }
    }

    document.getElementById('uglipop_overlay_wrapper').style.display = '';
    document.getElementById('uglipop_overlay').style.display = '';
    document.getElementById('uglipop_content_fixed').style.display = '';
}

//overlay_wrapper.click(function(){

function remove() {
    document.getElementById('uglipop_overlay_wrapper').style.display = 'none';
    document.getElementById('uglipop_overlay').style.display = 'none';
    document.getElementById('uglipop_content_fixed').style.display = 'none';
}

上記を読み込んで以下のようにセッティング

var custom1 = function(){
        uglipop({class:'put',source:'html',content:'<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d414895.2111496369!2d139.46068054017593!3d35.667919120148376!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b857628235d%3A0xcdd8aef709a2b520!2z5p2x5Lqs6YO95p2x5Lqs!5e0!3m2!1sja!2sjp!4v1563803576750!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>'});}
 
      var rem = function(){
        remove();
      }

html

<button class='button-blue' id='test1' onclick='custom1();'>地図を表示</button>

表示したいコンテンツはJS側に書きますのでHTMLはすっきり

via

Uglipop.js