javascript의 alert like function

Question

javascript에서 모달 팝업을 만들고 싶습니다.
하지만 내 요구 사항은 팝업이 열릴 때마다 닫힐 때까지 다음 자바 스크립트 줄 실행을 중단합니다.

예 :

var bool = false; 
DisplayModal("Show Message"); 
bool = true; 
alert("alerted only after closing the pop up : bool = true"); 
bool = false; 

그래서 모달 팝업을 닫을 때까지 "Show Message" bool이 적용되지 않습니다. 나는 팝업을 닫을 때 다음

나는 사전에 감사합니다 도움이 필요합니다 .. 나머지 스크립트는

마찬가지로 alert처럼 ... DisplayModal 후 순서대로 실행됩니다하지만 alert을 무시하고 싶지 않아 .. .

편집 : 좀 더 설명하기

봅니다 .. 내가 때를 실행을 중지 할

라는
정지 후 팝업 쇼 후 실행

팝업 다음 줄에서 계속 (수단 : bool = true; ...) 폐쇄 후

Answer 1

이 confirm

(function() { 
var result = confirm("I'm Happy?"); 
alert(result ? "Yes, I'm happy" : "No, I'm not happy"); 
}()); 

확인하기위한 작업 같은 소리를 것입니다 결과가 반환 될 때까지 현재 실행 스레드를 차단합니다.

Answer 2

경고, 프롬프트, 확인 및 XMLHTTPRequest가 JavaScript의 유일한 동기 함수입니다. 이벤트와 콜백을 사용해야합니다.

팝업을 닫을 때까지 사용자가 아무 것도 할 수 없게하려면 투명 한 div가 모든 페이지를 복구하도록 만들 수 있습니다 (팝업 제외).

Answer 3

대화 상자의 모양을 사용자 정의하려면 jQuery의 대화 위젯을 사용할 수 있습니다. 그것은 이벤트를 지원합니다. 간단한 예제를 만들었습니다. http://jsfiddle.net/5CBdm/

이벤트 핸들러를 대화 상자의 닫기 이벤트에 첨부하고 나머지 코드는 이벤트 핸들러에 넣을 수 있습니다.

필요한 HTML :

<div id="dialog-modal" title="Modal dialog"> 
    <p>Message</p> 
</div> 

그리고 해당 자바 스크립트 : 대화 상자에

$("#dialog-modal").dialog({ 
    height: 140, 
    modal: true, 
    close: function (event, ui) { 
     alert("Executed when the dialog is closed."); 
    }  
}); 

링크 :

http://jqueryui.com/dialog/#modal

http://api.jqueryui.com/dialog/#event-close

Answer 4

jQuery 플러그인을 사용할 수 있습니다.예를 들어 http://dimsemenov.com/plugins/magnific-popup/

아니면 자신 (jsfiddle에 그것을 시도 : http://jsfiddle.net/T2Vn3/을)에 의해 그것을 만들 수 있습니다

<div class="overlay"> 
    <div class="alert"> 
     This is alert! 
     <br/> 
     <button>OK</button> 
    </div> 
</div> 

<button class="forAlert">Click me!</button> 

JS :

이

document.querySelector('.alert button').addEventListener('click', function() { 
    document.querySelector('.overlay').style.display = 'none'; 
}, false); 

document.querySelector('.forAlert').addEventListener('click', function() { 
    document.querySelector('.overlay').style.display = 'block'; 
});