레벨2. 스크롤 이벤트 보다가 문득 (수업내용이랑 관계없이) 이용약관을 푸터쪽에 버튼을 만든 뒤, 누르면 모달창으로 띄워서 내용이 나오도록 해보고 싶어서 코드를 만들었습니다.
HTML과 CSS코드는 레벨1의 모달창 만들기 당시 코드들의 이름을 살짝 바꾸어서 사용하였고..
<button id="terms">이용약관</button>
<div class="black-bg01">
<div class="white-bg01">
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
.black-bg01 {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
visibility: hidden;
opacity:0;
transition: all 1s;
margin-top:50px;
};
.white-bg01 {
background: white;
border-radius: 5px;
padding: 30px;
}
자바스크립트는 다음과 같이 작성하였습니다.
$('#terms').on("click",function(){
$(".black-bg01").addClass('show-modal');
});
레벨1에서 봤던 모달창 강의랑 똑같이 모달창을 만들어보았는데 전혀 실행이 되지 않습니다. 혹시나 해서 레벨1때 로그인 모달창의 코드들을 푸터쪽 모달창 코드와 바꾸어서 실행해보았는데 그건 또 작동이 잘 되더라고요. 어떻게 해야할까요?
