심플팝업 백그라운드 관련 문의 입니다.

심플팝업 띄울때 백그라운드를 어둡게 노출시킬 수 있을까요?

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    팝업 내부의 배경인지

    페이지 전체의 배경인지 모호하여

    정확한 안내가 어렵습니다.

     

    조금 더 자세히 작성해주시겠어요?

    비회원으로 확인 가능한 링크도 남겨주시면

    안내에 도움이 됩니다.

    고맙습니다.

  • 위 이미지처럼 페이지 전체 배경입니다.

     

  • 안녕하세요.

    cosmosfarm_simple_popup_layout 필터를 활용하시면

    심플 팝업 레이아웃을 편집하실 수 있습니다.

    아래의 코드를 추가해보세요.

    add_filter('cosmosfarm_simple_popup_layout', 'cosmosfarm_simple_popup_layout_20211006', 10, 2);
    function cosmosfarm_simple_popup_layout_20211006($layout, $popup){
    	$layout .= '<div class="cosmosfarm-simple-popup-layout-wrap"></div>';
    	return $layout;
    }

    테마의 functions.php 파일에 코드를 추가하거나 Code Snippets 플러그인을 사용해서 코드를 추가할 수 있습니다.

     

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    .cosmosfarm-simple-popup-layout-wrap { position: fixed; top: 0; left: 0; z-index: 999998; width: 100%; height: 100%; background: black; opacity: 0.7; }

    위의 코드에서 opacity: 0.7 부분의 수치를 조절하시면

    백그라운드의 투명도를 조절하실 수 있습니다.

     

    마지막으로

    FTP로 접속해서 /wp-content/plugins/cosmosfarm-simple-popup/template/script.js 파일에

    cosmosfarm_simple_popup_close 함수의 코드를

    아래의 코드로 교체해보세요.

    function cosmosfarm_simple_popup_close(obj){
    	var parent = jQuery(obj).parents('.cosmosfarm-simple-popup-layout');
    	jQuery(parent).hide();
    
    	var layout = jQuery('.cosmosfarm-simple-popup-layout').filter(function(){
    		return jQuery(this).css('display') != 'none';
    	});
    	
    	if(!layout.length){
    		jQuery('.cosmosfarm-simple-popup-layout-wrap').hide();
    	}
    }

    고맙습니다.

  • 감사합니다.
    그런데, 한가지 문제가 발생합니다.

    팝업창 3개를 닫기 버튼으로 누르면 문제가 없는데,
    1일동안 보이지 않기 버튼으로 3개를 닫은 후, 새로고침을 했을 시에
    팝업창은 뜨지 않지만 검은색 배경은 남아있습니다.

    imgur.com/a/p2u348A

    어떻게 해결해야 할까요..?

  • 이전 댓글에 안내해드린 코드 중

    아래의 코드를 찾아서

    add_filter('cosmosfarm_simple_popup_layout', 'cosmosfarm_simple_popup_layout_20211006', 10, 2);
    function cosmosfarm_simple_popup_layout_20211006($layout, $popup){
    	$layout .= '<div class="cosmosfarm-simple-popup-layout-wrap"></div>';
    	return $layout;
    }

    아래의 코드로 교체해보시겠어요?

    add_filter('cosmosfarm_simple_popup_layout', 'cosmosfarm_simple_popup_layout_20211006', 10, 2);
    function cosmosfarm_simple_popup_layout_20211006($layout, $popup){
    	$popup_id = $popup->ID();
    	$popup_cookie = isset($_COOKIE["cosmosfarm_simple_popup_{$popup_id}"]) ? $_COOKIE["cosmosfarm_simple_popup_{$popup_id}"] : '';
    	if(!$popup_cookie){
    		$layout .= '<div class="cosmosfarm-simple-popup-layout-wrap"></div>';
    	}
    	return $layout;
    }

    고맙습니다.

  • 수정했더니 잘 됩니다.

    감사합니다!

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기