[참고소스] 레이어팝업

<style>
            /**팝업CSS**/
            .popup{position: fixed; top:0px; left:0px;
            width:100%; height:100%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
            }
            .popup.active{
                display: block;
            }
            .popup-wrap{
                position: absolute; 
                width:500px;
                top:25%;
                left: 25%;
            }
            .popup-content{background-color: #fff;
            color: #333; padding: 3em;
            border-radius: 10px;
        }
        .pop-close{position: absolute;
            right: -70px; top: -70px;width: 50px;
        }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            //Jquery 시작
            $(document).ready(function(){
                $(".popup01").click(function(){
                    $("#evnet-pop").addClass("active");
                });
                $(".pop-close").click(function(){
                    $("#evnet-pop").removeClass("active");
                });
            });
        </script>
        
        <!--팝업띄우기 -->
        <ul>
                <li class="popup01">HTML 포트폴리오사이트</li>
                <li>Java 실습프로그래밍</li>
                <li>게임만들기</li>
            </ul>
            
            <!--팝업영역 -->
            <div id="evnet-pop" class="popup">
            <div class="popup-wrap">
                <div class="popup-content">
                <h2>HTML 포트폴리오사이트</h2>
                <p>Html, CSS 수업에서 포트폴리오 사이트를
                    제작하였습니다. 포트폴리오를 만들기 전에
                    기획부터 만들었고, 기획서를 기반으로 페이지를 
                    구성할 수 있는 기술을 습득하였습니다.
                </p>
                </div>
                <img src="resource/images/star.png" alt="닫기버튼"
                class="pop-close" />
            </div>
        </div>