2023년 1월 22일1분 분량

다기능 다이얼로그 박스 또는 모달 창 (Dialog Box or Modal Window) - JavaScript

하나의 코드로 Confirm과 Alert 기능을 다 쓸 수 있는 다이얼로그 박스 (또는 모달 창) Dialog Box입니다. 하나의 코드로 다음의 세 가지 기능을 구현할 수 있습니다:

이 코드를 만든 이유는 브라우저의 alert와 confirm 창이 디자인 적으로 아주 구리(?)다라는 생각이었고 bootstrap modal로 어떻게 하면 콜백을 첨가하여 브라우저의 창 같은 기능을 원하는 디자인으로 재구현 할 수 있을까였습니다.

우선 아래의 HTML 코드를 넣어줍니다. 아래의 코드는 Bootstrap의 모달 창 (Modal Dialog)을 변형 한 코드입니다. 디자인을 하기 위한 CSS 클래스는 각자 알아서 쓰시기 바랍니다 ^^;

위의 HTML Markup 코드는 다음의 세 가지 기능이 있습니다:

다음은 아래의 JavaScript 코드를 넣습니다. 참고로 이 코드는 jQuery를 이용하여 DOM element를 변형합니다.

그 후에 아래와 같이 콜백 함수를 불러오는 코드 블록이 필요합니다.

마지막으로 showDialog 함수에서 button 누른 후 result의 값으로 페러미터로 보냈던 콜백 함수가 발동이 되죠. 아래는 showDialog을 부르는 예제입니다.

Alert

콜백이 있는 Alert

Confirm

수고하셨습니다. 즐거운 코딩되세요!

<Raank:랑크 />