front - modal

- 구현 

 

하단은 html modal샘플이다

<!-- modal -->
<div class="modal hidden">
  <div class="modal__overlay"></div><!-- 외부클릭시 닫을 용도 ,외부색깔담당 -->
  <div class="modal__content">
    <div id="modal__text">사용 가능한 아이디입니다.</div>
    <button class="modal-button" style="background-color: #2E9AFE;" id="modal_close">OK</button>
  </div>
</div>
<!-- //modal -->

하단은 modal 전용 css 이다

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}
.modal__content {
  position: relative;
  top: 0px;
  box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.19), 1px 6px 6px rgba(0, 0, 0, 0.23);
  width: 20rem;
  background-color:white;
  text-align: center;
  padding: 1rem;
  border-radius: 10px;
}
.modal-button{
    margin-top:0.2rem;
    padding:0.6rem 2rem;
    hegith:1.2rem;
    font: normal normal bold 1rem arial;
    color:white;
}
.hidden {
  display: none;
}

17 : modal__content 클래스는 모달창을 설정한다.

해당 코드를 빌려다가 쓰는 사람의 경우엔 , modal__content 클래스의 box-shadow , width만 변경해서 사용하면 될듯하다.

 

하단은 javascript 코드이다.

<script>
~~~
openModal(); 
~~~
 
//modal
const closeBtn = document.getElementById('modal_close');
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.modal__overlay');
const openModal = function(){
  modal.classList.remove('hidden');
}
const closeModal = function(){
  modal.classList.add('hidden');
} 
closeBtn.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
</script>

3 : openModal(); 을 원하는 자바스크립트 명령어 사이에 넣어주면 , 모달이 나온다.

 

하단의 이미지는 샘플 결과이다.

 

 

참고 및 수정 - https://github.com/eotkd4791/JavaScript/tree/main/Vanilla_JS/Modal