여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Javascript - BOM - popup boxes 객체
Javascript – BOM – popup boxes 객체
2년전 작성
2년전 수정

팝업 상자를 이용하여 새로운 팝업창을 만들 수 있다.

Javascript 이용하여 출력할 수 있는 팝업에는 경고 상자, 확인 상자 및 프롬프트 상자가 있다.

Popup Boxes

팝업창 내의 문구를 기재할 때 <br>과 같이 한 칸 띄고 싶다면 \n를 이용하면 된다.

Alert Box

경고 상자는 사용자에게 정보를 전달하고 “확인”을 눌러야 계속할 수 있도록 하고싶을 때 사용한다.

HTML
<button onclick="myFunction()">Try it</button>
Javascript
function alertbox() {
alert("경고 상자 입니다!\n확인을 누르면 창이 닫힙니다.");
}
기본 예시

Confirm Box

확인 상자는 사용자가 무언가를 ‘확인’하거나 ‘취소’를 클릭 해야하는 경우에 사용한다.

HTML
<button onclick="confirmbox()">클릭</button>

<p id="confirm"></p>
Javascript
function confirmbox() {
var txt;
if (confirm("짜장면을 좋아하시나요?")) {
txt = "네! 좋아합니다!";
} 
else {
txt = "아니오. 좋아하지 않습니다.";
}
document.getElementById("confirm").innerHTML = txt;
}
기본 예시

Prompt Box

프롬프트 상자는 사용자에게 값을 입력받아야할 때 사용한다. 입력한 후 [확인]을 눌러야한다. [취소]를 클릭하면 null을 반환한다.

HTML
<button onclick="promptbox()">클릭</button>

<p id="prompt"></p>
Javascript
function promptbox() {
let text;
let person = prompt("이름을 적어주세요:", "밍구");
if (person == null || person == "") {
text = "값을 입력하지 않았습니다.";
}
else {
text = person + "님! 안녕하세요?";
}
document.getElementById("prompt").innerHTML = text;
}
기본 예시

참고
관련 포스트
Javascript - BOM - popup boxes 객체

Mingg`s Diary
밍구
공부 목적 블로그