[javascript] 모달창 만들기

첫번째 방법

javascript

  $(".modals").click(function () {
        $(".black-bg").fadeIn();
      }); //로그인버튼을 누르면 모달창 생성 
      $(".btn-danger").click(function () {
        $(".black-bg").fadeOut(); //닫기를 누르면 모달창 사라짐
      });

HTML

<div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
      </div>
  
 로그인 버튼 
  <button class="modals">로그인</button>
  

CSS

.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 을 줘야한다. 

두번째 방법

(클래스 네임 추가,삭제하기)

javascript

 $(".modals").on("click", function () {
        $(".black-bg").addClass("show-modal");
      }); //css에서 작성한 show-modal이라는 클래스명 추가

      $(".btn-danger").on("click", function () {
        $(".black-bg").removeClass("show-modal");
      }); // 

css

.show-modal {
  display: block;
}