2017-05-16 8 views
1

팝업 버튼이 있습니다. 팝업이 있습니다. 버튼이 모든 페이지에 있습니다.한 번만 팝업보기 Jquery, PHP

팝업은 한 번만 나타납니다.

사용자가 페이지를 열고 버튼을 클릭하면 팝업이 나타나야하고 동일한 버튼을 다시 클릭하면 팝업이 표시되지 않고 다른 페이지로 리디렉션하고 동일한 버튼 팝업을 클릭하면 해당 페이지에서 나타나지 않습니다.

브라우저를 닫았다가 다시 열면 팝업이 나타나야하며 동일한 조건이 다시 적용되어야합니다.

다음은 팝업이 나타나야 할 때와하지 말아야 할 경우입니다. JQuery와 및 PHP

+0

봐. https://plugins.jquery.com/cookie/ –

+0

자바 스크립트 세션 저장소를 사용하여이 작업을 수행 할 수 있습니다. PHP를 사용할 필요가 없습니다. – spankajd

+0

세션 저장소를 사용하면이 작업을 수행 할 수 있습니다. –

답변

0

당신이 작업 jquery- 검사에 sessionStorage를 사용하여 클릭 예에 한 번만 팝업 쇼를 만들 수 있습니다 here

여기

jsfiddle.net/ayatullahrahmani/p1p2zpx5/

JQuery와 코드 -

입니다 쿠키에 855,586,

css-

body { 
     overflow:hidden; 
     } 
     .animateDivWrap { 
     position: absolute; 
     top: 70px; 
     right: 0px; 
     left:0px; 
     width: 300px; 
     height: 199px; 
     background: #f6f6f6; 
     z-index: 9; 
     display: none; 
     /*opacity: 0;*/ 
     border: solid 1px #ddd; 
     border-radius: 5px; 
      margin:auto; 
     } 
     .animateDivContent { 
     position:relative; 
      padding: 10px; 
     } 
     .animateDivContent .close { 
     position: absolute; 
     right: 5px; 
     top: 3px; 
     font-size: 12px; 
     color: #373434; 
     opacity: 1; 
     } 
     @-webkit-keyframes fadeInUp { 
     0% { 
     opacity: 0; 
     -webkit-transform: translateY(400px); 
     } 
     50%{ 
     opacity: 0.3; 
     } 
     100% { 
     opacity: 1; 
     -webkit-transform: translateY(0); 
     } 
     } 
     @keyframes fadeInUp { 
     0% { 
     opacity: 0; 
     transform: translateY(400px); 
     } 
     50%{ 
     opacity: 0.3; 
     } 
     100% { 
     opacity: 1; 
     transform: translateY(0); 
     } 
     } 
     .fadeInUp{ 
     opacity: 0; 
     -webkit-transform: translateY(400px); 
     transform: translateY(400px); 
     } 
     .activePopup { 
     display: block; 
     /*opacity:1;*/ 
     /*-webkit-animation:bounce 1s infinite;*/ 
     -webkit-animation-name: fadeInUp; 
     animation-name: fadeInUp; 
     -webkit-animation-name: fadeInUp; /* Safari 4.0 - 8.0 */ 
     -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */ 
     animation-name: fadeInUp; 
     animation-duration: 1s; 
     } 
     .close { 
     cursor: pointer; 
     } 
     .firstGone { 
     display:none; 
     } 

, HTML

<button type="button" class="open">open</button> 

     <div class="animateDivWrap"> 
     <div class="animateDivContent"> 
      <a class="close" href="javascript:void(0)" title="close"><i class="fa fa-times" aria-hidden="true"></i></a> 
     </div> 
     </div> 
+0

감사합니다 !!! 이것은 작동 중이다. –

0

sessionStorage와이를 달성하는 방법

이를위한 최선의 방법입니다. 해당 세션에 대한 데이터 만 저장하므로 따라서 팝업이 열려 있는지 여부를 저장할 수 있습니다.

버튼 클릭시 다음 함수를 핸들러 함수로 바인딩하면됩니다.

function onButtonClick(e) 
{ 
    if (sessionStorage.isButtonClicked == undefined) { 

     sessionStorage.isButtonClicked = true; 

     // You can do require functionality here e.g. open the popup. 

    } else { 

     // do nothing as popup is already opened. 
    } 
}