magnific-popupで連続ポップアップ表示

※自分用メモ

■概要
最初にログインボーナスのポップアップ、次に複数件のお知らせのポップアップ表示。
・指定時間経過後、次のお知らせポップアップ表示
・閉じるボタン押下で次のお知らせポップアップ表示

Laravel+jQuery

@if( isset($login_bonus_flg) )
<div id="loginbonus" class="white-popup">
    <h1>ログインボーナス</h1>
    <p>{{ $login_bonus_msg }}</p>
</div>
@endif
@if( count($userinfo) > 0 )
    @foreach($userinfo as $index => $lines)
        <div id="userinfo{{ $index }}" class="white-popup disptime_{{ $lines->disptime }}">
            {!! $lines->userinfo !!}
        </div>
    @endforeach

@endif


<script async src="/js/jquery.magnific-popup.min.js"></script>
<script>
$(window).load(function(){
    var open_flg = '{{ $login_bonus_flg }}';
    if( open_flg ){
        var timerid;

        /*
         * ログインボーナスポップアップ表示のあとにお知らせポップアップ表示
         */
        $.magnificPopup.open({
            items:[{
                src:'#loginbonus',
                type: 'inline',
                modal: true
            }],
            callbacks:{
                close:function(){
                    clearTimeout(timerid);

                    /*
                     * class名から表示時間取得
                     */
                    var disptime = eval($('#userinfo0').attr('class').replace(/.+disptime_(\d+)/, "$1")) * 1000;
                    openPopup(0, disptime);
                }
            }
        });

        /*
         * 指定時間経過後、ポップアップを閉じる
         */
        timerid = setTimeout(function(){
            $.magnificPopup.close();
        }, {{ $login_bonus_disptime }});
    }
});

/*
 * 次のお知らせポップアップの表示
 */
function openPopup(id, closetime){
    if( document.getElementById('userinfo'+id) != null ){
        var timerid;

        /*
         * setTimeoutを使用することで前回のポップアップを終了させ、次のポップアップ表示に切り替える
　　　　　*/
        setTimeout(function(){
            $.magnificPopup.open({
                items:[{
                    src:'#userinfo'+id,
                    type: 'inline',
                    modal: true
                }],
                callbacks:{
                    close:function(){
                        clearTimeout(timerid);

                        /*
                         * 次のIDの表示のためIDをインクリメント
                         */
                        id++;

                        /*
                         * class名から表示時間取得
                         */
                        if( document.getElementById('userinfo'+id) != null ){
                            var disptime = eval($('#userinfo'+id).attr('class').replace(/.+disptime_(\d+)/, "$1")) * 1000;
                            openPopup(id, disptime);
                        }
                    }
                }
            });

            /*
             * 指定時間経過後、ポップアップを閉じる
             */
            timerid = setTimeout(function(){
            $.magnificPopup.close();
            }, closetime);

        }, 1);
    }
}
</script>