JavaScript 클래스가 있는 응답 메시지 상자

반응형

JavaScript 클래스가 있는 응답 메시지 상자

이 메시지 상자는 재료 디자인의 토스트 메시지에서 영감을 받아 자바스크립트로 구현되었습니다.

저는 메시지 상자를 구현하기 위해 네이티브 자바스크립트 클래스를 사용했습니다. 이전 브라우저에서는 네이티브 JavaScript 클래스와의 호환성 문제로 인해 작동하지 않을 수 있습니다.

화면 너비가 768픽셀 이상인 경우 화면 오른쪽 상단 모서리에 토스트 메시지가 나타납니다. 그렇지 않으면 화면 중앙 하단에 토스트 메시지가 나타납니다.

사용.

 

MessageBox 클래스 인스턴스 만들기:

let msg = new MessageBox("#id", option)

사용 가능한 옵션(유형: 객체):

const option = {
    // number: Count in milliseconds before closing the message box
    closeTime: 1000,
    // bool: Flag if the close button (or label) will be hidden for click
    hideCloseButton: false,
}

대화 상자를 표시하려면 "표시" 방법을 호출합니다.

 

msg.show(
    "This is the message that will appear on the message box",
    () => {
          alert("This will be called after the message box is completely hidden");
    },
    "This is the close button"
  );