popup 끝나는 날짜 설정하여 자동으로 내리기

popup 끝나는 날짜 설정하여 자동으로 내리기

안녕하세요 TriplexLab 입니다.
오늘은 popup을 끝나는 날짜 설정에 관해서 이야기를 해보도록 하겠습니다.

먼저 제가 지난 포스트 중에서 아래와 같은 내용으로 팝업을 컨트롤 하는것에 관해서 이야기를 했었습니다.
아래 링크를 참고 하세요:)

jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정

 

이번 시간에는 popup을 등록하고, 오늘 하루 그만 보기 설정까지 했다면, 좀더 나아가서 끝나는 날짜 설정해서 자동으로 팝업이 내려가는 것을 해보겠습니다.

아래 코드를 보시면 다음과 같이 now 함수와, endDate함수를 호출해서 비교해여 팝업기 없이지도록 했습니다.
이렇게만 작성하면 팝업을 1개만 등록할때는 문제가 없지만, 여러게를 등록할때는 제사용을 할수가 없어서 문제가 있습니다.

function now () { // 현재 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
    const popDt = new Date(),
    popYear = popDt.getFullYear(),
    popMonth = popDt.getMonth() + 1,
    popDate = popDt.getDate(),
    popHours = popDt.getHours(),
    popMin = popDt.getMinutes(),
    popSecond = popDt.getSeconds();
    return popYear+'-'+(popMonth<10?'0'+popMonth:popMonth)+'-'+(popDate<10?'0'+popDate:popDate)+'-'+popHours+'-'+popMin+'-'+popSecond;
};

function endDate() {  // 끝나는 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
    const endYear = "2021",
    endMonth = "11",
    endDate = "12", 
    endHours = "11",
    endMin = "33",
    endSecond = "00";
    return endYear+'-'+(endMonth<10?'0'+endMonth:endMonth)+'-'+(endDate<10?'0'+endDate:endDate)+'-'+endHours+'-'+endMin+'-'+endSecond;
};

function dayNone() { // 현재 날짜와, 끝나는 날짜 서로 비교하여 pop을 숨기는 기능
    if(now() > endDate()){ 
        pop.style.display = 'none';
    }
};

그래서 다음과 같이 수정했습니다.
아래와 같이 수정을 하면, endDate 함수에 인자로 값들을 받아서 제사용을 할수 있습니다.

function now () { // 현재 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
    const popDt = new Date(),
    popYear = popDt.getFullYear(),
    popMonth = popDt.getMonth() + 1,
    popDate = popDt.getDate(),
    popHours = popDt.getHours(),
    popMin = popDt.getMinutes(),
    popSecond = popDt.getSeconds();
    return popYear+'-'+(popMonth<10?'0'+popMonth:popMonth)+'-'+(popDate<10?'0'+popDate:popDate)+'-'+popHours+'-'+popMin+'-'+popSecond;
};

function endDate(endYear,endMonth,endDate,endHours,endMin,endSecond) {  // 끝나는 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
    return endYear+'-'+(endMonth<10?'0'+endMonth:endMonth)+'-'+(endDate<10?'0'+endDate:endDate)+'-'+endHours+'-'+endMin+'-'+endSecond;
};

function dayNone() { // 현재 날짜와, 끝나는 날짜 서로 비교하여 pop을 숨기는 기능
    if(now() > endDate('2021','11','13','10','46','00')){ 
        pop.style.display = 'none';
    }
    
    if(now() > endDate('2021','11','15','23','59','00')){ 
        pop2.style.display = 'none';
    }
};

위에 코드를 파일로 제공합니다.
궁금 하신 분들은 다운로드 받아서 확인 해보세요!!

JavaScript 레이어 팝업 여러게 설정.zip

0.00MB