TIL 221101 회고

2일차 회고록

팀프로젝트 마크업시작👏

와이어 프레임만 가지고 작업을 하려니 처음엔 막막했는데 작업을 좀 더 생각하게 되어서 좋은 경험이었다.
처음 시작하는 프로젝트여서 팀원이 각자 뭘 해야 하는지 걱정을 많이 했지만
매니저님, 튜터님께서 처음엔 다 그런 거라고 하셔서 걱정을 좀 덜게 되었던 것 같다.
이틀밖에 되지 않았으니 당연한 일이었는데 괜히 걱정을 했던 것 같다.

다중 모달팝업창📘

팀원 소개를 눌렀을때 모달팝업창을 띄우는 작업을 하게 되었는데
한개의 팝업이 아닌 여러개의 모달팝업을 리서치 해보았다.

• 제이쿼리를 이용한 다중 모달팝업창
  1.html 레이아웃 짜기

<!--모달버튼-->
<div>	
  <p>첫번째모달버튼  <a href="javascript:openModal('modal1')">버튼</a></p>
 
</div>
<div>	
  <p>두번째모달버튼   <a href="javascript:openModal('modal2')">버튼</a></p>

</div>

<!--모달 검은 뒷배경-->
<div class="modalWrap" id="modalWraper"></div>
<div class="modalCon modal1">
  <p>첫번째 모달 내용</p>
  <button class="btn">닫기</button>
</div>
<div class="modalCon modal2">
  <p>두번째 모달 내용</p>
  <button class="btn" onclick="close()">닫기</button>
</div>

2.css

.modalWrap{
	display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
}
.modalCon{
	display:none;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60%;
    max-width:600px;
    padding:50px;
}

3.jquery

function openModal(modalnum){
  document.get
	$('#modalWraper').fadeIn(200)
	$('.' + modalnum).fadeIn(200)
}

function cancel() {
	$('#modalWraper').fadeOut(200)
	$(".modalCon").fadeOut(200);
}

예시
다중모달팝업창