라이트 박스와 같은 팝업

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 ("클릭") in document.ready 기능을 사용하십시오. 그러면 자동으로 해당 클래스를 클릭하여 라이트 박스 팝업이 열립니다.