<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input id='text' type="text" class="form-control">
</div>
<div class="my-3">
<input id='pw' type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<button id='show-btn'>나와라 얍</button>
<script>
document.querySelector('#show-btn').addEventListener('click', function(){ document.querySelector('.black-bg').classList.add('show-modal') });
document.querySelector('#close').addEventListener('click', function(){ document.querySelector('.black-bg').classList.add('hide-modal') });
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
display: none;
transition: all 0.5s;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
.show-modal {
display: block;
}
.hide-modal {
display: none;
}
