모달창 과 팝업창의 다른점

---

팝업창

팝업창이란 현재 열려있는 브라우저 페이지에 아예 새로운 페이지 하나를 더 띄우는 것을 말한다.

주로 자바스크립트의 

window.onload = function(){
  window.open("popup.html", "", "width=500, height=500");
}

 

를 통해 팝업창을 생성한다.
(팝업창을 강제로 막아놓을 경우 보이지 않는다)

 

 

---

모달창

모달창은 현재 열려있는 브라우저 페이지 위에 새로운 레이어를 까는 것을 말한다.

모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다.

기존의 페이지와 부모-자식 관계를 갖는다.
주로 부트스트랩을 통해 활용한다.

 

모달창의 기본 서식은 다음과 같다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <div class="modal fade" id="myModal" role="dialog"> <!-- 사용자 지정 부분 : id명 -->
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">모달 창 타이틀</h4> <!-- 사용자 지정 부분 : 타이틀 -->
        </div>
        <div class="modal-body">
          <p>여기에 필요한 텍스트 메시지 넣기</p> <!-- 사용자 지정 부분 : 텍스트 메시지 -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

 

---

모달창 사용하기는 아래 링크에서 설명

https://zinisang.tistory.com/97