■ 팝업창 나오게 하기
<style>
header{
height: 400px;
background-color: blueviolet;
}
main{
height: 800px;
background-color: aqua;
}
footer{
height: 200px;
background-color: blueviolet;
}
.botton{
width: 200px;
height: 50px;
background-color: red;
align-content: center;
text-align: center;
}
.wrap{
position: relative;
}
.pop{
width: 300px;
height: 200px;
background-color: blue;
position: fixed;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
display: none;
}
</style>
<body>
<div class="wrap">
<header>
</header>
<main>
<div class="botton">버튼</div>
</main>
<footer>
</footer>
<div class="pop">
공지사항<br>
안녕<br>
안녕<br>
<a href="#" class="close">닫기</a>
</div>
</div>
<script>
$(".botton").click(
function(){
$(".pop").toggle();
}
);
$(".close").click(
function(){
$(".pop").hide();
}
);
</script>
</body>