07_반응형 웹(4) : modal

display : flex 속성은 부모요소에게 주어야한다!

 

 

#modal.html

   <h1>모달창 만들기</h1>
   <hr>
   <button id="btn">로그인</button>


   <div class="modal-wrap">
      <div class="modal">
         <div class="modal-top">
            <h1>로그인</h1>
            <hr>
         </div>
         <div class="modal-content">
            <form action="/login.html" method="post">
               <input type="text" name="id" placeholder="아이디를 입력하세요">
               <input type="password" name="pw" placeholder="비밀번호를 입력하세요">
               <input type="submit" name="submit" value="로그인">
               <input type="button" name="button" value="닫기">
            </form>
         </div>
      </div>
   </div>

 

   <style>
      body {
         background-color: blueviolet;
      }

      .modal-wrap {
         /*전체를 사용할 거라서 relative없어도 됨*/
         position: absolute;
         top: 0px;
         left: 0px;
         width: 100vw;
         height: 100vh;
         /*배경이 환하면 -> 검정사용 / 배경이 어두우면 -> 흰색사용*/
         /*background-color: rgba(0, 0, 0, 0.5);*/
         background-color: rgba(255, 255, 255, 0.5);

         /*flex속성은 부모한테!*/
         display: none;
         justify-content: center;
         align-items: center;
      }

      .modal {
         background-color: #ffffff;
         width: 40vw;
         height: 40vh;
         max-width: 500px;
         min-width: 300px;
         min-height: 340px;
      }

      .modal-top>h1 {
         text-align: center;
      }

      .modal-content>form>input {
         display: block;
         outline: none;
         margin: 20px auto;
         width: 80%;
         height: 30px;
         border: 1px solid #ccc;
      }
   </style>

 

   <script>
      $(function() {

         $("#btn").click(function() {
            $(".modal-wrap").css("display", "flex");
         });

         $("input[type=button]").click(function() {
            $(".modal-wrap").css("display", "none");
         });

      });
   </script>