$(".modals").click(function () {
$(".black-bg").fadeIn();
}); //로그인버튼을 누르면 모달창 생성
$(".btn-danger").click(function () {
$(".black-bg").fadeOut(); //닫기를 누르면 모달창 사라짐
});
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
로그인 버튼
<button class="modals">로그인</button>
.black-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
padding: 30px;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
모달창이 처음부터 뜨지 않으려면 css에 display = none 을 줘야한다.
(클래스 네임 추가,삭제하기)
$(".modals").on("click", function () {
$(".black-bg").addClass("show-modal");
}); //css에서 작성한 show-modal이라는 클래스명 추가
$(".btn-danger").on("click", function () {
$(".black-bg").removeClass("show-modal");
}); //
.show-modal {
display: block;
}