LoginSignup
7

More than 5 years have passed since last update.

モーダルウィンドウ

Last updated at Posted at 2016-05-19

クラス化する

デモ:http://mo49.tokyo/qiita/20160519/

これにスクロール対応したのがベストプラクティスかな。

Modal.js
export default class Modal {

    constructor (opts = {}) {}

    open() {
        this.genOverlay();
        this.genPopup();
     }

    close() {
        $(".popup, #overlay").fadeOut(function(){
            $(this).remove();
        });
    }

    genPopup() {
        const $open = $('#open');
        const $popup = $('<div class="popup">');
        const $txt = $('<p class="txt">HELLO WORLD.</p>');
        const $close = $('<div id="close" class="btn close">CLOSE</div>');

        $popup.hide();

        $open.after($popup);
        $popup.append($txt);
        $popup.append($close);

        $popup.fadeIn();
    }

    genOverlay() {
        const $overlay = $('<div id="overlay"></div>');
        $overlay.hide();
        $('body').prepend($overlay);
        $overlay.fadeIn();
    }

}
index.js
import Modal from './lib/Modal';

const modal = new Modal();

$('#open').on('click', () => {
    modal.open();

    $('#close, #overlay').on('click', () => {
        modal.close();
    })

})

基本形

デモ:http://mo49.tokyo/jQuery_sdl/11/

クリックされる'a href'にモーダルで表示する'img src'を予め入れておくというテクニック。

html
<a href="img/img1.jpg"><img src="img/thumb1.jpg" alt="Photo1"></a>

モーダルウィンドウがfadeOut後にremoveされている点も良い。

javascript
$(function(){
    // サムネールをクリック
    $("a").click(function(){
        // body要素の最後にdiv#bgを追加
        $("body").append('<div id="bg">');

        // body要素の最後にdiv#photoを追加
        $("body").append('<div id="photo">');

        // それぞれ非表示にする
        $("#bg").hide();
        $("#photo").hide();

        // #photoの中にimg要素を追加
        $("#photo").html("<img>");

        // img要素にsrc属性を設定
        $("#photo img").attr("src",  $(this).attr("href"));
        console.log($(this).attr("href"));

        // img要素にwidth、height、alt属性を設定
        $("#photo img").attr("width", 640);
        $("#photo img").attr("height", 420);
        $("#photo img").attr("alt", "Photo");

        // #bgと#photoをフェードイン   
        $("#bg").fadeIn();
        $("#photo").fadeIn();

        // 背景をクリック   
        $("#bg").click(function(){
            // 背景(自分自身)をフェードアウト、完了したら削除
            $(this).fadeOut(function(){
                $(this).remove();
            });

            // 画像をフェードアウト、完了したら削除
            $("#photo").fadeOut(function(){
                $(this).remove();
            });
        });


        return false;
    });


});

スクロール量からちょうど良い位置に表示

実際に使う機会が多いのはこちら。

デモ:http://mo49.tokyo/qiita/20160416/

クリックした瞬間のscrollTopを取得して、常に上から指定の位置に表示する。

$(".btn").click(function(){

    modalGen();

    // 位置の調整
    var scrollTop = window.scrollY;
    $('#modal-img').css("margin-top", scrollTop + 100);

    return false;
});

function modalGen(){

    // 大枠
    $("body").append('<div id="overlay">');
    $("body").append('<div id="modal-img">');

    $("#overlay").hide();
    $("#modal-img").hide();

    $("#overlay").fadeIn();
    $("#modal-img").fadeIn();

    // 大枠の中身
    var img = new Image();
    img.id = "sample-img";
    var imgClose = new Image();
    imgClose.id = "close-img";

    // pc or sp
    if ($('body').hasClass('env-pc')) {
        img.src = "http://placehold.it/640x340/27709b/ffffff";
        imgClose.src = "img/close.png";
    }else{
        img.src = "http://placehold.it/320x170/27709b/ffffff";
        imgClose.src = "img/close.png";
    }
    $('#modal-img').append(img);
    $('#modal-img').append(imgClose);

    // 削除
    $("#overlay, #close-img").click(function(){
        $("#overlay").fadeOut(function(){
            $(this).remove();
        });

        $("#modal-img").fadeOut(function(){
            $(this).remove();
        });
    });
}

引用
jQuery標準デザイン講座lesson11

バグ

IEでscrollYが効かないとき・・・

javascript
var scrollTop = window.scrollY;
if (!scrollTop) {
    // ie
    scrollTop = window.pageYOffset;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7