자바스크립트 모달 팝업 띄우기

 

• Alert 함수

Alert 함수는 텍스트와 OK 버튼으로 구성된 modal 팝업을 띄운다. 유저는 OK 버튼으로 팝업을 종료할 수 있다. (이렇게 유저가 해당 팝업을 처리한 다음에야 나머지 웹페이지 기능을 사용할 수 있는 팝업을 modal window라고 부른다.)

 

• Prompt 함수

result = prompt(title, [default]);

Prompt 함수는 특정 텍스트와 유저가 문자열을 입력할 수 있는 창이 있는 modal 팝업을 띄운다. 첫 번째 파라미터는 팝업 안에 표시되는 텍스트 메시지이며, 두 번째 파라미터는 유저가 아무것도 입력하지 않았을 경우의 디폴트 값을 결정한다. 이 때, 유저가 특정한 값을 입력하면 텍스트로 결과값이 처리되며, 입력하지 않았을 경우 null 타입으로 처리된다.

 

(*[ ] 표시는 해당 파라미터가 꼭 필수적이지 않다는 의미이다. 그러나 IE의 경우 유저가 아무 값도 입력하지 않으면 자동으로 "undefined" 텍스트를 결과값으로 삽입하므로, IE 호환성을 고려하면 두 번째 파라미터도 입력하는 것을 권장한다.)

 

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`);

상기 설명한 ` `를 통하여 prompt 함수를 변수에 할당, 결과값을 뽑아서 String에 포함시킬 수 있다.

 

• Confirm 함수

Confirm 함수는 입력한 텍스트, 그리고 OK와 Cancel 두 버튼이 포함된 modal 팝업을 표시한다. 유저가 OK를 눌렀을 경우 true 값으로 저장되며, cancel을 눌렀을 경우 false 값으로 저장된다. 

 

• Alert, Prompt, Confirm 함수의 한계

세 함수는 모두 간편하게 사용할 수 있으나, 한계가 있다. 우선, 모달 팝업의 위치를 지정할 수 없다. (브라우저가 지정하며, 보통 정가운데이다.) 모달 팝업의 디자인도 브라우저가 결정한다. 

 

 

 

 

---

 

출처: 모던 자바스크립트 (javascript.info/first-steps) 챕터 2의 1~6 파트