이 앵커 태그는 어떻게 팝업을 닫습니까?

Question

방금이 튜토리얼을 완료했습니다 : http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ - HTML5 + CSS3과 함께 모달 팝업을 이해합니다. 내가 알고 싶습니다 앵커 태그 팝업 종료 할 수있는 방법이다 : 나는 href가 그냥 "#"을 변경

<div id="openModal" class="modalDialog"> 
<div> 
    <a href="#close" title="Close" class="close">X</a> 
    <h2>Modal Box</h2> 
    <p>This is a sample modal box that can be created using the powers of CSS3.</p> 
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> 
</div> 
</div> 

을 그리고 또 다른 요소를 대상으로 덕분에 내가 같은데요 작동 팝업은 CSS에서 target 상태를 잃고 불투명도는 다시 0으로 설정됩니까?

코멘트 작성자의 한 명인 Codepen : http://codepen.io/petebot/pen/DBvKj - 정확한 코드는 아니지만 동일한 아이디어를 전달합니다.

Answer 1

:target CSS3 선택기를 사용하면됩니다. #openModal이 URL 조각이면 모달의 ID와 일치 한 다음 모달의 스타일이 적용됩니다. 닫기 링크를 클릭하면 조각이 변경되고 스타일이 더 이상 적용되지 않으므로 닫힙니다.

수동으로 변경하려는 경우에도 목표는 #openModal 인 동안 만 열린 상태로 유지됩니다.