[jQuery]모달창 만들기

 

화면가운데 위치하도록 설정

fixed를 쓰는이유는 스크롤 위치에 상관 없이 화면 가운데에 위치하도록 하기 위해서

 {
  position:fixed;
  top:50%; 
  left:50%;
  transform: translate(-50%,-50%);
 }

 

 

함수를 통해 매칭되는 모달창을 연다

<a href="javascript:openModal('modal1');" class="button modal-open">모달열기1</a>

function openModal(modalname){
  document.get
  $("#modal").fadeIn(300);
  $("."+modalname).fadeIn(300);
}

 

#modal을 따로 놓고 투명 검정 배경으로 설정 => 투명검정부분이나 닫기버튼을 눌러 창 닫기 

 

$("#modal, .close").on('click',function(){
  $("#modal").fadeOut(300);
  $(".modal-con").fadeOut(300);
});