[JS] 모달창 띄우기

(전 네비게이션 내용 참고하면 편함.)

1. 모달창 디자인을 한다.

//뒷 배경(어둡게)
.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
 }
 
 //모달창 디자인
 .white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
 }

//네비게이션바 바로 아래, 메뉴 리스트 위에 코드를 놓아야 위치가 괜찮음
<button id="modalBtn">모달창 띄우기</button>

<div class="black-bg">
  <div class="white-bg">
    <h4>로그인하세요</h4>
    <button class="btn btn-danger" id="close">닫기</button>
  </div>
</div>

 

2. 버튼을 생성해서 버튼 클릭시 뒷 배경과 모달창이 뜨도록 한다.

 

2-1. 디자인한 Css를 일단 숨긴다.

-> black-bg가 white-bg를 품고 있기 때문에 black-bg만 일단 없앴다가 Css로 붙여놓으면 됨.

//뒷 배경(어둡게)
.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    display: none;
 }
 
 //모달창 디자인
 .white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
 }

.show-modal{
	display : block;
}

2-2. show-modal이라는 보이게 하는 Css를 JavaScript를 이용해서 땠다 붙였다 할 것임

<script>

	document.querySelector('#modalBtn').addEventListener('click',function(){
    	document.querySelector(".black-bg").classList.add('show-modal')
    
    });

</script>

//jQuery로 짠 코드

<script>

	$('#modalBtn').on('click',function(){
    	$('.black-bg').addClass('show-modal')
    });

</script>

modalBtn이라는 아이디를 가지고 있는 버튼을 찾아 클릭이라는 이벤트가 생길때 콜백 함수를 실행해주세요.

콜백 함수 -> <div class="black-bg">black-bg라는 css class를 가지고 있는 요소 class에 show-modal이라는 클래스를 넣어서

<div class="black-bg show-modal">이러고 만들어 주세요.

 

 

+ '닫기' 버튼을 누르면 모달창이 닫히게 하기

<script>

	$(#close).on('click',function(){
    	$('.black-bg').removeClass('show-modal')
    });

</script>