자바스크립트 간단한 팝업창 만들기 - 확인 취소 버튼 클릭시 각자 기능 실행

휘뚜루마뚜루 쓰기 좋은 자바스크립트 팝업을 만들어봤습니다.

메시지 내용과 확인 / 취소 버튼이 있고

확인 / 취소 버튼을 클릭하면

클릭한 버튼에 따라서 다른 기능을 실행할 수 있습니다.

 

아래는 그 결과입니다.

 

 

 

아래는 전체 코드 입니다.

(별건 없습니다.)

 

HTML

<div class="body">
<button type="button" id="myButton">
click
</button>
</div>

 

 

Script

class PopupComponent {
	constructor(message) {
  	const popup = document.createElement('div');
    this.popup = popup;
    popup.classList.add('popup');
    
    const container = document.createElement('div');
    container.classList.add('container');
    
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    messageDiv.innerText = message;
    
    const buttonRow = document.createElement('div');
    buttonRow.classList.add('button-row');
    
    const confirmBtn = document.createElement('button');
    confirmBtn.setAttribute('type', 'button');
    confirmBtn.innerText = '확인';
        
    const cancelBtn = document.createElement('button');
    cancelBtn.setAttribute('type', 'button');
    cancelBtn.innerText = '취소';
    
    buttonRow.append(confirmBtn);
    buttonRow.append(cancelBtn);
    
    container.append(messageDiv);
    container.append(buttonRow);
    
    popup.append(container);
    
    this.confirmBtn = confirmBtn;
    this.cancelBtn = cancelBtn;
  }
  open() {
  	return new Promise(resolve => {
    	document.body.append(this.popup);
      this.confirmBtn.addEventListener('click', () => {
      	const result = this.confirm(true);
        resolve(result);
      });
      this.cancelBtn.addEventListener('click', () => {
      	const result = this.confirm(false);
        resolve(result);
      });
    });
  }
  confirm(result) {
  	this.popup.remove();
  	if(result){
    	return true;
    }else{
    	return false;
    }
  }
}

document.querySelector('#myButton').addEventListener('click', () => {
console.log('click');
	const popup = new PopupComponent('테스트 메시지 입니다.');
  popup.open().then(result => {
  	if(result){
    	const div = document.createElement('div');
      div.innerText = '확인 버튼을 클릭했습니다.';
    	document.querySelector('.body').append(div);
    }else{
    	const div = document.createElement('div');
      div.innerText = '취소 버튼을 클릭했습니다.';
    	document.querySelector('.body').append(div);
    }
  });
});

 

 

CSS

.body{
  height: 500px;
}

#myButton{
  z-index: 2;
}

.popup{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  background-color: white;
  border-radius: 2rem;
  padding: 2rem;
}

.message{
  text-align: center;
  font-size: 1.5rem;
}

.button-row{
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.button-row button{
  flex-grow: 1;
}