<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<style>
*{margin:0;padding:0;}
button{
cursor:pointer;
}
#popup{
display:none; - 얜 커버라서 버튼안눌리니까 일단 안나오게 처리
position:fixed;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
left:0;
top:0;
}
#popup .pop_cover{
width:70%;
height:70%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background-color:salmon;
}
#popup .pop_cover #close{
float:right;
}
</style>
<script>
$(function(){
/*$("#open").click(function(){ 오픈을 눌럿을때
$("#popup").css("display","block"); 아이디 팝업인애의 디스플레이가 block으로 바뀌게 한다.(쟤 커버 올라옴)
});
$("#close").click(function(){ 클로즈 눌럿을때
$("#popup ").css("display","none"); 팝업커버 안나오게해준다
});*/
더 간단한 방법쓰!!!!!
$("#open").click(function(){
$("#popup").show();
});
$("#close").click(function(){
$("#popup).hide();
});
});
</script>
</head>
<body>
<button id="open">팝업창 띄우기</button>
<div id="popup">
<div class="pop_cover">
<button id="close">닫기</button>
</div>
</div>
</body>
</html>
show(); 보이게
hide(); 안보이게
show hide 대신 쓸만한것
FadeIn(시간);
FadeOut(시간);
slideDown();
slideUp();
시간은 1000=1초 알지?