환영 div를 사용자/브라우저 세션 당 한 번만 표시하십시오.

Question

사용자 또는 세션별로 환영 이메일을 한 번만 표시하려고합니다. Jquery 옵션이 있다는 것을 알고 있습니다. jquery에 초보자이기 때문에, 나는 그것을 스스로 해결할 수 없었다.

$(document).ready(function() { 
 
    $("#close-welcome").click(function() { 
 
    $(".welcome").fadeOut(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="welcome"> 
 
    <div> 
 
    <h1>Hello..!<br> Welcome to ABC 
 
    <br> 
 
    </h1> 
 
    <h2>We wish you a Great Day..!</h2> 
 
    <br> 
 

 
    <h2><a id="close-welcome" href="#">Thank you.. and please take me to the  website</a> </h2> 
 
    </div> 
 
</div>

사용자가 브라우저를 닫을 때까지 내가 한 번만이 시작 페이지를 표시 할 .. 쿠키를 설정 귀중한 도움

Answer 1

을 기다리고 도와주세요.

$(document).ready(function() { 
    if ($.cookie('noShowWelcome')) $('.welcome').hide(); 
    else { 
     $("#close-welcome").click(function() { 
      $(".welcome").fadeOut(1000); 
      $.cookie('noShowWelcome', true);  
     }); 
    } 
}); 

jQuery.cookie javascript file을 포함해야합니다. 우리가 비행에 숨어 때 깜박이는 표시되지 않습니다 때문에

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

Answer 2

그것은 더 나은

<a href="" id="close-edu" class="waves-effect"><span class="edu" style="display: none;">New</span></a> 

JQuery와

$(document).ready(function() { 
    if ($.cookie('noShowEducation')) ; 
    else { 
     $('.edu').show(); 
     $("#close-edu").click(function() { 
      $(".edu").fadeOut(1000); 
      $.cookie('noShowEducation');  
     }); 

    } 
}); 

Answer 3

이 경우 클라이언트는 쿠키

를 먹지 않는다 sessionstorage를 사용할 수 있습니다.은 세션이 진행되는 동안 정확한 데이터를 수집 할 수 있도록하기위한 것입니다.

최상의 사용자 경험을 위해서는 기존 CSS에서 [wellcomeElement] .style.display = "none"속성으로 시작해야합니다.

그래서, 전체 절차는 ...처럼 간단 될 것

1. 체크 환영 메시지는
2. 표시를 표시 한 경우! : Take-no-action!

완료.

예제 코드 :

"message" in sessionStorage ? 0 : 
    [wellcomeElement].style.display = "block", 
    sessionStorage.setItem("message",true); 

코드 싹둑가 바로 환영 메시지 요소 다음에 넣어 (바람직보다) 스크립트 태그에서 할 수있다.

그러나 전체 이전 버전과의 호환성을 위해, 당신은 항상 속성으로 세션 이름을 사용하여 다시 떨어질 수 :

/message/.test(name) ? 0 : 
[wellcomeElement].style.display = "block", 
name = 'message'; 

감사합니다.