javascript/jQuery
[jQuery]모달창 만들기
알찬 퍼블리셔
2019. 6. 20. 13:50
728x90
반응형
화면가운데 위치하도록 설정
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);
});
728x90
반응형