자바스크립트 기본모달창

모달창(modal window)

메세지가 있는 작은 창을 모달창이라고 부른다.

모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단되고 사용자가 창을 닫기 전까지

나머지 페이지와 상호 작용이 불가능하다.

---

alert

사용자가 확인 버튼을 누를 때 까지 메세지를 보여주는 창이 떠있는다.

alert("Hello");

 

prompt

사용자에게 텍스트를 입력하라는 메세지와 동시에, 입력 필드를 제공하고

확인을 누르면 사용자가 입력한 문자열을 반환, 취소하면 null 반환

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

result = prompt(title, [default]);

title - 사용자에게 보여줄 문자열

default - 입력 필드의 초기값(선택값)

사용자가 입력을 취소한 경우 null값 반환

• 모든 사용자에게 깔끔한 프롬프트를 보여주려면 두 번째 매개변수를 항상 전달해 줄 것을 권장

 

인수를 감싸는 대괄호 [...]의 의미

default를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미한다.

 

confirm

사용자가 확인 또는 취소 버튼을 누를 때까지 메세지가 창에 보여진다.

사용자가 확인 버튼을 누르면 true, 취소는 false를 반환

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

 

위 세 가지 함수의 제약사항

• 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치한다.
• 모달 창의 모양은 브라우저마다 다르며 개발자의 창의 모양을 수정할 수 없다.