alert 말고 모달창 modal 검정투명배경에 창 띄우기 css js

 

 

화면에서 노출되는 것을 제지하려면

display: none; 을 부여해줘야 함

 

 

① 기본 container 는 body의 100% * 100%를 차지,

② 모달창의 배경이 되어줄 검정투명창도 container와 동급 레벨로, body의 100% * 100%를 차지,

③ 모달창의 콘텐츠를 담을 상자는 body의 정중앙을 차지하도록 함

 

 

 

   [ CSS ]   

 

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial, "Franklin Gothic Medium", Arial, sans-serif;
  font-size: 1.3em;
  background: linear-gradient(to left, #ffab0f, #247afd, #fe46a5);
  position: absolute;
}

 

 

①

div.container {
  margin: 0 auto;
  position: relative;
}

 

②
div#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

 

③

div#modal > div.modal_content {
  display: none;
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 70px 50px;
  margin-top: 20px;
  text-align: center;
}

 

 

 

   [ JS ]   

 

자바스크립트 코드로 클릭 이벤트 시

모달창을 띄우고 닫아주기

 

window.onload = function () {

  modal = document.getElementById("modal");
  modal_content = document.querySelector(".modal_content");

  document.getElementById("user").addEventListener("click", function () {
    modal.style.display = "block";
    modal_content.style.display = "block";
  });

  document.querySelector(".close").addEventListener("click", function () {
    modal.style.display = "none";
    modal_content.style.display = "none";
  });

  document.getElementById("confirmBtn").addEventListener("click", function (e) {
    e.preventDefault();
    window.location.href = "/nextpage";
  });

}