[제이쿼리]대화상자

대화 상자(dialog box)

1.alert()

2.confirm()

3.prompt()

 

---

alert() 메소드

사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다립니다.

 

html

    <button onclick="alertDialogBox()">alert 대화 상자</button>

       

    <script>

        function alertDialogBox() {

            alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");

        }

    </script>

 

 

 

confirm() 메소드

사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과값(true/false)을 반환합니다.

 

html

    <button onclick="confirmDialogBox()">confirm 대화 상자</button>

    <p id="text"></p>

       

    <script>

        function confirmDialogBox() {

            var str;

            if (confirm("확인이나 취소를 눌러주세요!") == true) {

                str = "당신은 확인을 눌렀습니다!";

            } else {

                str = "당신은 취소을 눌렀습니다!";

            }

            document.getElementById("text").innerHTML = str;

        }

    </script>

 

 

 

prompt() 메소드

사용자에게 간단한 메시지를 보여주고, 사용자가 입력한 문자열을 반환합니다.

 

html

    <button onclick="promptDialogBox()">prompt 대화 상자</button>

    <p id="text"></p>

       

    <script>

        function promptDialogBox() {

            var inputStr = prompt("당신의 이름을 입력해 주세요 : ", "홍길동");

            if (inputStr != null) {

                document.getElementById("text").innerHTML = "당신의 이름은 " + inputStr + "입니다.";

            }

        }

    </script>