JS-모달창
JS-모달창
오늘은 JS에서 모달창에 대해 알아보겠습니다.
모달창이란 특정 내용의 메시지를
사용자에게 전달하기 위해 띄우는 메시지 창을 의미합니다.
JS에서 모달창을 지원하고 있는데
모달창을 사용하는 방식에는 3가지가 있습니다.
(1)
alert
alert는 모달창을 출력하는 함수입니다.
alert만 사용해서 모달창을 띄운다면
메시지 내용과 확인 버튼만 있습니다.
모달창이 떴을 때는 JS 동작이 멈추고
확인 버튼을 눌렀을 때 다시 JS가 동작합니다.
그리고 확인 버튼을 누르기 전까지
모달창은 사라지지 않습니다.
사용방법은 alert('문자열' or 숫자형 or `${변수}` 등);
(;은 한줄이라면 작성하지 않으셔도 되지만 ;을 넣는 것을 추천드립니다.)
(2)
prompt
prompt를 사용하면
alert로 모달창을 띄운 형태는 같으나
차이점은 입력란이 있고 확인과 취소 버튼이 있다는 것입니다.
그리고 alert와 달리 result와 같은 함수를 같이 사용해야
모달창을 부를 수 있다는 것입니다.
prompt 모달창은 입력란에 텍스트와 같은 값을 입력하고
확인을 누르면 진행되고 취소하면 null을 출력합니다.
사용방법은 result = prompt('title', '입력란');
title, 입력란 부분은 ''만 남기셔도 됩니다.
(3)
confirm
confirm은 alert 모달창과
prompt 모달창이 섞인 느낌인데
confirm의 모달창은 메시지 내용만 보이고
확인과 취소 버튼으로 구성되어 있습니다.
prompt 모달창과의 차이는
confirm의 모달창의 확인은 true를
취소, esc를 누르면 false를 나타냅니다.
오늘은 JS에서 지원하는 모달창에 대해
알아보았습니다.
alert 모달창은 기본적으로 모달창이 생성되지만
prompt, confirm 모달창들은 result와 함깨 사용해야
모달창이 나옵니다.
그래서 prompt, confirm 모달창은 변수를 사용해서
alert 함수를 사용해서 변수가 있는 모달창을
띄울 수 있습니다.
오늘 내용은 기본적으로 어떤 모달창이 있는지 알려드렸고
해당 모달창은 어떤 형식으로 지원하는지에 대해 알아보았습니다.
오늘 내용을 인식하고 공부하시면
응용하셔서 변수를 사용하는 식으로 모달창을
이용하실 수 있습니다.
모달창의 단점은 디자인을 변경할 수 없기 때문에
해당 브라우저에서 지원하는 형태의 모달창이 나오고
장점이라고 하면 간단하게 모달창을 띄워서
사용할 수 있다는 것입니다.
그래서 실무에서 사용하실 경우가 있기 때문에
알아두시면 좋겠습니다.
감사합니다!!
