메인 우측 하단 팝업

메가스터디 공무원 메인 홈페이지에서 사용되는 팝업 기능입니다.
위치는 메인사이트 우측 하단부에 두는 것을 원칙으로 하면서 하단의 띠 배너 보다는 상위에 존재하도록 작업해야 합니다.

$('.main_exhibi_pass .exhibi_sd').slick({
  infinite: true,
  arrow: false,
  speed: 0,
  autoplaySpeed: 4000,
  autoplay: true,
  dots: true,
});

function main_exhibi_close() {
  if ($("#main_exhibi").css("display") == "block") {
    $("#main_exhibi").hide();
  }
}

if ($('.main_exhibi_pass .exhibi_sd .item').length == 0) {
  $('.main_exhibi.main_exhibi_pass .close').hide();
}

상단 오늘 하루 보지 않기

오늘 하루 보지 않기 닫기

메가스터디 공무원 메인 홈페이지에서 사용되는 팝업 기능입니다.
주로 메인사이트 우측 상단부에서 사용되며 '오늘 하루 보지 않기' 버튼을 통해 하루동안 팝업을 차단하는 기능을 제공합니다.

<% if fncRequestCookie("mok_hd_pop_one") = "" then%>
  

		
			
		
		오늘 하루 보지 않기
		닫기
	
<% end if%>

function mok_close() {
  $("#mok_hd_pop").hide();
}
function mok_day_close() {
  setCookie("mok_hd_pop_one", "close", 1);
  // setCookieToday('mok_hd_pop_one', 'close', 1);
  mok_close();
}

중앙 오늘 하루 닫기 팝업

오늘 하루 닫기 팝업 관련 쿠키값 초기화

오늘 하루 닫기 닫기

자세히 보기 학습지원센터 바로가기

메가스터디 공무원 메인 홈페이지에서 사용되는 팝업 기능입니다.
'오늘 하루 보지 않기'와 마찬가지로 동일하게 하루동안 팝업을 닫는 기능을 제공합니다.

  오늘 하루 닫기 팝업 관련 쿠키값 초기화

<%if fncRequestCookie("todayPopupCookie") = "" then%>

  

    오늘 하루 닫기
    닫기
  
  

    
    
    자세히 보기
    학습지원센터 바로가기
  

<%End if%>

if(getCookie('todayPopupCookie') == 'close'){
  closeCmegaPopup('popupToday');
}
function closeCmegaPopupToday() {
  setCookiePopupToday('todayPopupCookie', 'close', 1);
  closeCmegaPopup('popupToday');
}

딤 팝업

딤 팝업 호출 딤 관련 쿠키값 초기화

오늘 하루 닫기 닫기

메가스터디 공무원 메인 홈페이지 및 다양한 홍보 페이지에서 사용되는 팝업 기능입니다.
팝업이 보여질 때, 주변 배경부는 딤드(Dimmed) 처리가 되어 사용자가 원활하게
팝업 내부의 정보를 확인할 수 있습니다.

<%if fncRequestCookie("todayPopupDimCookie") = "" then%>
  딤 팝업 호출
  

    

    

      

        오늘 하루 닫기
        닫기
      
      

        
        
      
    
  

<%end if%>

if(getCookie('todayPopupDimCookie') == 'close'){
  closeCmegaDimPopup('popupDim');
}
function closeCmegapopupDimToday() {
  setCookiePopupToday('todayPopupDimCookie', 'close', 1);
  closeCmegaDimPopup('popupDim');
    $('.mfp-close').trigger('click');
}
function closeCmegaDimPopup() {
  $('.mfp-close').trigger('click');
}

영상 팝업 - 비디오

메가스터디 공무원 메인 홈페이지 및 다양한 홍보 페이지에서 사용되는 팝업 기능입니다.
딤드(Dimmed)효과와 함께 화면 중앙부에 고유 영상이 재생됩니다.
준비된 영상 파일을 통해 재생될 영상을 교체할 수 있습니다.

<%If fncRequestCookie("todayPopupVideoCookie") = "" then%>

  

  

    

      오늘 하루 닫기
      닫기
    
    

      
    
  

<%End if%>

#popupVideo{display:none;}

if(getCookie('todayPopupVideoCookie') == 'close'){
  closeCmegaPopup('popupVideo');
}
function closeCmegaPopupVideoToday() {
  setCookiePopupToday('todayPopupVideoCookie', 'close', 1);
  closeCmegaPopup('popupVideo');
}

영상 팝업 - 유튜브

메가스터디 공무원 메인 홈페이지 및 다양한 홍보 페이지에서 사용되는 팝업 기능입니다.
딤드(Dimmed)효과와 함께 화면 중앙부에 특정 유튜브 영상이 재생될 수 있습니다.
준비된 유튜브 영상의 주소를 통해 재생될 영상을 교체할 수 있습니다.

<%If fncRequestCookie("todayPopupYoutubeCookie") = "" then%>

  

  

    

      오늘 하루 닫기
      닫기
    
    

      

        
      
    
  

<%End if%>

#popupYoutube{display:none;}

if(getCookie('todayPopupYoutubeCookie') == 'close'){
  closeCmegaPopup('popupYoutube');
}
function closeCmegaPopupYoutubeToday() {
  setCookiePopupToday('todayPopupYoutubeCookie', 'close', 1);
  closeCmegaPopup('popupYoutube');
}

팝업 호출 - Fade-In & Body 움직임

당첨 팝업

2022.8.17.
당첨을 축하드립니다!

[메가공무원] 거꾸로 플래너 핑크 컬러

• ※당첨되신 거꾸로 플래너는 7/20(수) 발송될 예정이오나, 내부 사정에 의해 발송일이 변경될 수 있습니다.
• ※거꾸로 플래너는 회원 정보 상의 주소 ‘%주소주소주소주소주소주소주소%’ 로 발송될 예정입니다. [ 주소 변경 > ]
• ※주소 미기재 & 오기재로 인한 재발송은 불가합니다.

확인

메가스터디 공무원 홍보 페이지에서 주로 사용되는 팝업 기능입니다.
지정된 버튼을 클릭하면 페이드인(Fade-In)효과와 함께 딤드(Dimmed) 처리된 팝업이 나타납니다.
해당 코드를 통해 제공되는 팝업은 마우스 스크롤 등을 통해 팝업 상태를 유지하면서 화면 Body 이동이 가능합니다.

팝업 호출 - Fade-In & Body 고정

당첨 팝업

2022.8.17.
당첨을 축하드립니다!

[메가공무원] 거꾸로 플래너 핑크 컬러

• ※당첨되신 거꾸로 플래너는 7/20(수) 발송될 예정이오나, 내부 사정에 의해 발송일이 변경될 수 있습니다.
• ※거꾸로 플래너는 회원 정보 상의 주소 ‘%주소주소주소주소주소주소주소%’ 로 발송될 예정입니다. [ 주소 변경 > ]
• ※주소 미기재 & 오기재로 인한 재발송은 불가합니다.

확인

메가스터디 공무원 홍보 페이지에서 주로 사용되는 팝업 기능입니다.
지정된 버튼을 클릭하면 페이드인(Fade-In)효과와 함께 딤드(Dimmed) 처리된 팝업이 나타납니다.
해당 코드를 통해 제공되는 팝업은 마우스 스크롤 등을 통한 화면 Body 이동이 불가능합니다.
팝업을 닫고 난 후에는 다시 스크롤 이동이 가능해집니다.

팝업 호출 - Fade Up & Down & Body 고정

메가스터디 공무원 홍보 페이지에서 주로 사용되는 팝업 기능입니다.
위 혹은 아래에서 페이드업(Fade-Up) 및 페이드다운(Fade-Down)효과와 함께 딤드(Dimmed) 처리된 팝업이 나타납니다.
해당 코드를 통해 제공되는 팝업은 마우스 스크롤 등을 통한 화면 Body 이동이 불가능합니다.
또한, iOS에서도 화면 상태가 고정됩니다.

(개발 대응1) 알림 신청 팝업 호출

메가스터디 공무원 홍보 페이지에서 '알림신청' 등을 위해 주로 사용되는 팝업 기능입니다.
지정된 버튼을 클릭하면 페이드인(Fade-In)효과와 함께 딤드(Dimmed) 처리된 팝업이 나타납니다.
해당 팝업에서는 이미지 파일 및 사용자가 제공할 정보 내용 등을 직접 작성하여 서버에 제출할 수 있습니다.
또한 팝업을 열고 닫을 때에 별도의 개발로직을 넣을 수 있습니다.
해당 코드를 통해 제공되는 팝업은 마우스 스크롤 등을 통한 화면 Body 이동이 불가능합니다. 다만, iOS에서는 이동이 가능합니다.

(개발 대응2) 알림 신청 팝업 호출

메가스터디 공무원 홍보 페이지에서 개발 로직이 들어갔을 때 주로 사용되는 팝업 기능입니다.
지정된 버튼을 클릭하면 페이드인(Fade-In)효과와 함께 딤드(Dimmed) 처리된 팝업이 나타납니다.
또한 팝업을 열고 닫을 때에 별도의 개발로직을 넣을 수 있습니다.
해당 코드를 통해 제공되는 팝업은 마우스 스크롤 등을 통한 화면 Body 이동이 불가능합니다. 다만, iOS에서는 이동이 가능합니다.

(개발 대응3) 알림 신청 팝업 호출

메가스터디 공무원 홍보 페이지에서 개발 로직이 들어갔을 때 주로 사용되는 팝업 기능입니다.
지정된 버튼을 클릭하면 페이드인(Fade-In)효과와 함께 딤드(Dimmed) 처리된 팝업이 나타납니다.
또한 팝업을 열고 닫을 때에 별도의 개발로직을 넣을 수 있습니다.
해당 코드를 통해 제공되는 팝업은 마우스 스크롤 등을 통한 화면 Body 이동이 불가능합니다. 다만, iOS에서는 이동이 가능합니다.

모달 팝업 - 자세히 보기

자세히 보기 팝업

강사 홍보 풀페이지에서 주로 사용되는 팝업 기능입니다.
컨텐츠에 대한 추가적인 설명 이벤트가 필요한 경우 주로 사용되며 딤드(Dimmed) 처리 되어 나타나는 것을 기본으로 합니다.

원형 슬라이드 팝업

오늘 하루 닫기

메가공무원의 다양한 페이지에서 주로 사용되는 원형 팝업 기능입니다.
오늘 하루 보지 않기 및 슬라이드 기능을 제공하고 있습니다.

                    
  

      
      

          

              
                  
              
          
          
          

              
                  
              
          
             
      
      오늘 하루 닫기
  

.main_exhibi.lab{position: absolute; top: 0; right: -17%; width: 181px; z-index: 1;}
.main_exhibi.lab a{display:block;}
.main_exhibi.lab .close{position: absolute;right: 10px;width: 11px;height: 10px;top: 0;background:url(https://design.megagong.net/image/m/2023/0330_academy/bn_flt_cls.png) no-repeat center;z-index: 2;}
.main_exhibi.lab .close.today{right: auto;left: 50%;top: auto;transform:translateX(-50%);background-image:none;bottom: -25px;font-size: 10px;color: #666;width: 70px;height: 18px;text-align: center;line-height: 18px;border: 1px solid #666;background: #fff;}
.main_exhibi.lab .item {position: relative;text-align: cen666ter;}
.main_exhibi.lab .item img {display:inline-block;}
.main_exhibi.lab .slick-arrow {display:none!important;}
.main_exhibi.lab .slick-dots {position:absolute;bottom:15px;left:0;right:0;font-size:0;text-align: center;}
.main_exhibi.lab .slick-dots li {display:inline-block;margin:0 2px;}
.main_exhibi.lab .slick-dots button {width:8px;height: 8px;border-radius: 50%;background:#000;opacity:.6;font-size:0;}
.main_exhibi.lab .slick-dots .slick-active button {opacity: 1;background: #fff;}

@media screen and (max-width: 1200px){
.main_exhibi.lab{max-width:35%;right: 0;}
.main_exhibi.lab .slick-dots {bottom: 10px;}
.main_exhibi.lab .slick-dots button {width: 5px;height: 5px;}
.main_exhibi.lab .close.today{bottom: -20px;}
}

$('.main_exhibi.lab .exhibi_sd').slick({
    infinite: true,
    arrow: false,
    speed: 0,
    autoplaySpeed: 2000,
    autoplay: true,
    dots: true,
});

$(".main_exhibi.lab .close").on("click",function(){
    $(this).parent('.main_exhibi.lab').css('display','none')
})
$(".main_exhibi.lab .close.today").on("click",function(){
    setCookie("main_exhibi_lab", "close", 1);
    $(this).parent('.main_exhibi.lab').css('display','none')
})

이벤트 약관 팝업 - 중앙 딤 팝업

메가공무원의 이벤트&프로모션 페이지에서 주로 사용되는 약관 팝업입니다.

이벤트 약관 팝업 - tiny 팝업

메가공무원의 이벤트&프로모션 페이지에서 주로 사용되는 약관 팝업입니다.