ライトボックスはポップアップのようです

Question

このコードはライトボックスですが、コンテンツを表示するためにはクリックする必要があり、クリックすることなく表示する必要があります。自動。ポップアップ。

$(document).ready(function() { 
    $('.lightbox').click(function() { 
    $('.background, .box').animate({ 
     'opacity': '.60' 
    }, 500, 'linear'); 
    $('.box').animate({ 
     'opacity': '1.00' 
    }, 500, 'linear'); 
    $('.background, .box').css('display', 'block'); 
    }); 

    $('.close').click(function() { 
    $('.background, .box').animate({ 
     'opacity': '0' 
    }, 500, 'linear', function() { 
     $('.background, .box').css('display', 'none'); 
    });; 
    }); 

    $('.background').click(function() { 
    $('.background, .box').animate({ 
     'opacity': '0' 
    }, 500, 'linear', function() { 
     $('.background, .box').css('display', 'none'); 
    });; 
    }); 
}); 

Answer 1

これはどうですか？コードを関数に移動し、ドキュメント上で開いたポップアップ機能を実行するだけです。

$(document).ready(function() { 
    $('.lightbox').click(function() { 
    openPopup(); 
    }); 

    $('.close').click(function() { 
    closePopup(); 
    }); 

    $('.background').click(function() { 
    closePopup(); 
    }); 

    openPopup(); 
}); 


function openPopup() { 
    $('.background, .box').animate({ 
     'opacity': '.60' 
    }, 500, 'linear'); 
    $('.box').animate({ 
     'opacity': '1.00' 
    }, 500, 'linear'); 
    $('.background, .box').css('display', 'block'); 
} 

function closePopup() { 
    $('.background, .box').animate({ 
     'opacity': '0' 
    }, 500, 'linear', function() { 
     $('.background, .box').css('display', 'none'); 
    }); 
} 

Answer 2

Jqueryを使用してイベントをトリガーできます。このポップアップを自動的に開くには、 $（ '。ライトボックス'）。trigger（ "click"） in document.ready機能を使用します。これにより、自動的にそのクラスのクリックが呼び出され、ライトボックスのポップアップが開きます。