라이트 박스가있는 스크립트는 한 번만 실행됩니다.

Question

링크를 클릭하면 사라지는 라이트 박스 기능을 만들려고합니다. 나는 그것을 한 번 실행할 수있다. 달리고 닫히면 다시 도망 칠 수 없습니까? 이상한 종류? 나는 무엇을 잘못 했는가?

내 스크립트를

<script> 
    $(document).ready(function() { 
      $('.button1').click(function() { 
        $('#aloe').fadeIn(600); 
      }); 
    }); 
</script> 

코드 :

<a class="button1"><img src="{{ 'aloevera.png' | asset_url }}" /></a> 


<div id="aloe" style="display: none;"><div id="box1"> 
      <div id="inner"><a class="exit" onclick='$("#box1").fadeOut(600, function() { $(this).remove(); });'>x</a> 
      </div> 
     <div class="outer"> 
      <div class="middle"> 
      <div class="inner"> 
       <h1>Organic Aloe Vera Extract</h1> 
       Our organic Aloe Vera Extract is from Asia. The polysaccharides act as moisturizers and hydrate the skin. 
       Aloe vera is absorbed into the skin and stimulates the fibroblasts to replicate themselves faster and it 
       is these cells that produce the collagen and elastin fibers, so the skin becomes more elastic and less wrinkled. 
      </div> 
      </div> 
     </div> 
    </div></div> 

Answer 1

당신이 그것을 페이드 아웃 후 요소를 제거하기 때문에 그것은, 그래서 다시 표시 할 수 없습니다 : 인라인 JS을 수행하는 속성이 있음을

가

$("#box1").fadeOut(600, function() { $(this).remove(); }) 

주 나쁜 생각입니다. ready 처리기에 넣고 remove 전화를 제거하십시오. 또한 아마 #aloe 밖으로보다는 #box1 퇴색 할 :.

$(document).ready(function() { 
    $('.button1').click(function() { 
     $('#aloe').fadeIn(600); 
    }); 

    $('.exit').click(function() { 
     $('#aloe').fadeOut(600); 
    }); 
}); 

Demonstration of working code

Answer 2

당신이 DOM에서 # BOX1를 제거 remove()를 사용하여 종료합니다. 즉, 두 번째로 사라질 때 존재하지 않습니다. 대신 hide()을 사용하십시오. 이는 DOM에서 컨테이너를 제거하는 대신보기에서 컨테이너를 숨기는 CSS 속성 만 설정하기 때문입니다.