심플팝업 띄울때 백그라운드를 어둡게 노출시킬 수 있을까요?
안녕하세요~^^
팝업 내부의 배경인지
페이지 전체의 배경인지 모호하여
정확한 안내가 어렵습니다.
조금 더 자세히 작성해주시겠어요?
비회원으로 확인 가능한 링크도 남겨주시면
안내에 도움이 됩니다.
고맙습니다.
위 이미지처럼 페이지 전체 배경입니다.
안녕하세요.
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개를 닫은 후, 새로고침을 했을 시에
팝업창은 뜨지 않지만 검은색 배경은 남아있습니다.
어떻게 해결해야 할까요..?
이전 댓글에 안내해드린 코드 중
아래의 코드를 찾아서
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;
}
고맙습니다.
수정했더니 잘 됩니다.
감사합니다!