JavaScript
모달 - 프롬프트

통사론

• 경고 (메시지)
• 확인하다 (메시지)
• 프롬프트 (message [, optionalValue])
• 인쇄()

비고

사용자 프롬프트 정보

사용자 프롬프트 는 확인 또는 입력과 같은 사용자 작업을 요청하는 브라우저 모달을 호출하는 데 사용되는 웹 응용 프로그램 API의 일부입니다.

window.alert(message)

사용자에게 메시지가있는 모달 팝업 을 보여줍니다.
닫으려면 [확인]을 클릭해야합니다.

alert("Hello World"); 

아래의 "알림 사용하기"에서 더 많은 정보를 얻을 수 있습니다.

boolean = window.confirm(message)

제공된 메시지와 함께 모달 팝업 을 표시하십시오.
부울 값 true / false 각각 응답하는 [확인] 및 [취소] 버튼을 제공합니다.

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

제공된 메시지와 사전 입력 값이있는 입력 필드를 모달 팝업 으로 표시하십시오.
사용자가 입력 값을 제공 한 result 반환합니다.

prompt("Enter your website address", "http://");

아래의 "prompt () 사용"에서 더 많은 정보를 얻을 수 있습니다.

window.print()

문서 인쇄 옵션이있는 모달을 엽니 다.

print();

지속적인 프롬프트 모달

프롬프트를 사용할 때 사용자는 항상 취소를 클릭 할 수 있으며 값은 반환되지 않습니다.
빈 값을 방지하고 더 지속적 만들려면 :

<h2>Welcome <span id="name"></span>!</h2>

<script>
// Persistent Prompt modal
var userName;
while(!userName) {
  userName = prompt("Enter your name", "");
  if(!userName) {
    alert("Please, we need your name!");
  } else {
    document.getElementById("name").innerHTML = userName;
  }
}
</script>

jsFiddle 데모

요소 삭제 확인

confirm() 을 사용하는 방법은 일부 UI 액션이 페이지를 파괴적으로 변경하고 게시물 메시지를 삭제하기 전에 즉, 알림 및 사용자 확인을 수반하는 것이 좋습니다.

<div id="post-102">
  <p>I like Confirm modals.</p>
  <a data-deletepost="post-102">Delete post</a>
</div>
<div id="post-103">
  <p>That's way too cool!</p>
  <a data-deletepost="post-103">Delete post</a>
</div>

// Collect all buttons
var deleteBtn = document.querySelectorAll("[data-deletepost]");

function deleteParentPost(event) {
  event.preventDefault(); // Prevent page scroll jump on anchor click
  
  if( confirm("Really Delete this post?") ) {
    var post = document.getElementById( this.dataset.deletepost );
    post.parentNode.removeChild(post);
    // TODO: remove that post from database
  } // else, do nothing
  
}

// Assign click event to buttons
[].forEach.call(deleteBtn, function(btn) {
  btn.addEventListener("click", deleteParentPost, false);
});

jsFiddle 데모

alert ()의 사용법

window 객체의 alert() 메서드는 지정된 메시지와 OK 또는 Cancel 버튼이있는 경고 상자 를 표시합니다. 해당 단추의 텍스트는 브라우저에 따라 다르며 수정할 수 없습니다.

통사론

alert("Hello world!");
// Or, alternatively...
window.alert("Hello world!");

생산하다

사용자에게 정보가 전달되도록하려면 경고 상자 가 자주 사용됩니다.

참고 : 경고 상자는 현재 창에서 초점을 이동하고 브라우저가 메시지를 읽도록합니다. 상자가 닫힐 때까지 사용자가 페이지의 다른 부분에 액세스하지 못하게하므로이 메서드를 과도하게 사용하지 마십시오. 또한 사용자가 확인을 클릭 할 때까지 추가 코드 실행을 중지합니다. (특히, setInterval() 또는 setTimeout() 로 설정된 타이머는 틱하지 않습니다. 경고 상자는 브라우저에서만 작동하며 디자인은 수정할 수 없습니다.

반환 값

alert 함수는 값을 반환하지 않습니다.

prompt ()의 사용법

프롬프트는 입력을 요청하는 사용자에게 대화 상자를 표시합니다. 텍스트 필드 위에 배치 할 메시지를 제공 할 수 있습니다. 반환 값은 사용자가 제공 한 입력을 나타내는 문자열입니다.

var name = prompt("What's your name?");
console.log("Hello, " + name);

프롬프트의 텍스트 필드에 기본 텍스트로 표시되는 두 번째 매개 변수 인 prompt() 전달할 수도 있습니다.

var name = prompt('What\'s your name?', ' Name...');
console.log('Hello, ' + name);