팝업창 만들기
본문
팝업창을 만들고 있습니다.
현재 제작된건 여기까지이구요..
원하는건 페이지 로드시 자동으로 팝업이 띄어오르고
close 버튼을 누르면 팝업이 내려가는 기능을 만들고 싶습니다.
지금 기능은 팝업열기 클릭시 팝업이 띄어오르는 형태인데 오랜만에 코드를 건드리려고 하니
헷갈리네요 아시는 고수분들 계시면 알려주시면 감사하겠습니다( _ _)
<button id="show">팝업열기</button>
<div class="background">
<div class="window">
<div class="popup">
<button id="close">Close</button>
<div class="popup_wrap">
<div class="popup_left">
<li class="popup_left_image"></li>
<p class="popup_left_text">~~~가<br>오픈되었습니다!</p>
<span class="popup_left_button">참가하기</span>
</div>
<div class="popup_right">
<li class="popup_right_image"></li>
<p class="popup_right_text">~~~가<br>오픈되었습니다!</p>
<span class="popup_right_button">참가하기</span>
</div>
</div>
</div>
<div>
<div>
<script>
function show () {
document.querySelector(".background").className = "background show";
}
function close () {
document.querySelector(".background").className = "background";
}
document.querySelector("#show").addEventListener('click', show);
document.querySelector("#close").addEventListener('click', close);
</script>
<style>
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000;
/* 숨기기 */
z-index: -1;
opacity: 0;
}
.show {
opacity: 1;
z-index: 1000;
transition: all .5s;
}
#close{
float: right;
background: black;
color: #fff;
}
.window {
position: relative;
width: 100%;
height: 100%;
}
.popup_wrap{
display: flex;
/*margin-top: 5vh;*/
background: teal;
height: 65vh;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.popup_left{
width: 50%;
height: 100%;
background:black;
}
.popup_left_image{
width: 100%;
height: 70%;
background: url(./poster1.png)no-repeat center;
background-size: cover;
list-style: none;
}
.popup_left_text{
font-size: 1.5em;
color: #fff;
text-align: left;
margin-left: 1em;
}
.popup_left_button{
background: white;
margin: 0 auto;
display: inline-block;
left: 50%;
float: left;
padding: 0.5em 1em;
margin-left: 1em;
border-radius: 3em;
}
.popup_right{
width: 50%;
height: 100%;
background:black;
}
.popup_right_image{
width: 100%;
height: 70%;
background: url(./poster2.png)no-repeat center;
background-size: cover;
list-style: none;
}
.popup_right_text{
font-size: 1.5em;
color: #fff;
text-align: left;
margin-left: 1em;
}
.popup_right_button{
background: white;
margin: 0 auto;
display: inline-block;
left: 50%;
float: left;
padding: 0.5em 1em;
margin-left: 1em;
border-radius: 3em;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
/* 임시 지정 */
width: 90vh;
/*height: 80%;*/
/* 초기에 약간 아래에 배치 */
transform: translate(-50%, -40%);
}
.show .popup {
transform: translate(-50%, -50%);
transition: all .5s;
}
</style>
답변을 작성하시기 전에 로그인 해주세요.
