1. 경고 다이얼로그

 

alert("메시지") 함수

- 메시지’와 '확인' 버튼을 가진 다이얼로그 출력, 메시지 전달

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function a() {
            alert("클릭을 하셨군요!!");
        }
    </script>
</head>
<body>
    <button onclick="a()">클릭</button>
</body>
</html>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

2. 프롬프트 다이얼로그

 

prompt("메시지", "디폴트 입력값") 함수

- 사용자로부터 문자열을 입력 받아 리턴

 

3. 확인 다이얼로그

 

confirm("메시지") 함수

- “메시지”를 출력하고 ‘확인/최소(OK/CANCEL)’버튼을 가진 다이얼로그 출력

- ‘확인’ 버튼을 누르면 true, '취소' 버튼이나 강제로 다이얼로그를 닫으면 false 리턴

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function a(){
            name = prompt("이름을 입력하세요.","");
            ok = confirm("결제하겠습니까?")
            if(ok){
                document.writeln("결제 OK")
            }else{
                document.writeln("결제 CANCEL")
            }
        }
    </script>
</head>
<body>
    <button onclick="a()">클릭</button>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

확인다이얼로그, 프롬프트다이얼로그 화면구현

 

openclose