モーダルウィンドウのメモ

今回は完全に自分自身のメモです。
参考にする人もいるのかも知れませんので、一応簡単な説明を。

配布テーマの商品ページのモーダルウィンドウのJSとHTML

JS

    $('#modal-open').click(function(){
        var h = $(window).height();
        var w = $(window).width();
        var cw = (h - 80);
        var pxleft = ((w - cw)/2);
        var pxtop = ((h - w)/2);
        if(h <= w){
        $('.modal_window').css({'width': cw + 'px','left': pxleft + 'px','top': 15 + 'px'})
        }else{
        $('.modal_window').css({'width': w + 'px','top': pxtop + 'px','left': 0 + 'px'})
        }
        $('.close_overlay,.modal_window').fadeIn('slow');
        $('.mdlimg').each(function(){
            $(this).attr("src",$(this).data("img"));
        });
        $("#carousel2").flexslider({
         animation:"slide",
         controlNav:false,
         animationLoop:false,
         slideshow:false,
         sync:"#carousel"
         });
        $('.close_overlay,#modal-close').click(function(){
            $('.close_overlay,.modal_window').fadeOut('slow');
            });
        $(window).on('load resize', function(){
        var h = $(window).height();
        var w = $(window).width();
        var cw = (h - 80);
        var pxleft = ((w - cw)/2);
        var pxtop = ((h - w)/2);
        if(h <= w){
        $('.modal_window').css({'width': cw + 'px','left': pxleft + 'px','top': 15 + 'px'})
        }else{
        $('.modal_window').css({'width': w + 'px','top': pxtop + 'px','left': 0 + 'px'})
        }
        });
        });

HTML

<div class="close_overlay">×</div>
<div class="modal_window">
       <div id="carousel2" class="flexslider">
        <ul class="slides">
            <li><img class="mdlimg" src="" data-img="<?php usces_the_itemImageURL(0); ?>"></li>
            <?php foreach ( $imageid as $id ) : ?>
            <li><img class="mdlimg" src="" data-img="<?php usces_the_itemImageURL($id); ?>"></li>
            <?php endforeach; ?>
        </ul>
    </div>
        <p id="modal-close"><i class="fa fa-times-circle"></i></p>
</div><!--/.modal_window-->

css

.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-indent: -9999px;
    background: #000;
    opacity: 0.7;
    z-index: 5;
    position: fixed;   
}

.modal_window {
text-align: center;
display: none;
background: none repeat scroll 0% 0% #FFF;
z-index: 10001;
position: fixed;
border-radius: 5px;
    #carousel2{margin: 0;}
    p{margin: 0rem 1rem 0;
        font-size: 1.5rem;
        cursor: pointer;
        }
}
#modal-open{cursor: pointer;}

こんな感じでした。
テーマを少し変更しようと思って忘れない為のメモでした。

では

---

---