window.showModalDialog가 사용되지 않는 이유는 무엇입니까? 대신 무엇을 사용해야합니까?

Question

window.showModalDialog을 사용하는 GreaseMonkey 스크립트를 개발하고있었습니다.

그러나 마무리하기 전에, 나는 파이어 폭스 (29)가 경고 것을 발견했다 : window.showModalDialog의

사용()는 지원되지 않습니다. 대신 window.open() 을 사용하십시오. 추가 지원 https://developer.mozilla.org/en-US/docs/Web/API/Window.open

는 그러나 문제는 순서 window.open 요구 UniversalBrowserWrite 특권 window.open를 사용하여 모달 창을 열 수 있다는 것입니다.

그렇다면 window.showModalDialog은 (는) 더 이상 사용되지 않습니다. 권한이 필요없는 API가 있습니까?

주 : 나는 (jQuery의 같은)을 가짜 모달 대화 상자를 원하지 않는다, 나는 자바 스크립트의 실행을 일시 정지 실제 모달이 필요합니다.

Answer 1

현재 권한을 사용하지 않고 모달 창을 사용하려는 경우 가장 좋은 방법은 jQuery UI Dialog 또는 비슷한 것을 사용하는 것입니다.

Answer 2

스크립트 실행을 차단하려면 while (true) { }을 사용하십시오. 이것이 showModalDialog에 대한 동등한 나쁜 동작이라는 사실은 그들이 showModalDialog을 제거한 이유의 일부입니다.

또한 "모달"및 "차단 스크립트 실행"은 동일한 내용이 아닙니다. "모달"은 다른 모든 것의 꼭대기에있는 것을 의미하며, 그러한 것들과 상호 작용하지 못하게합니다. 따라서 jQuery UI 대화 상자는 모달이며 스크립트 실행을 차단하지 않습니다.

Answer 3

이 솔루션을 계속 사용하려면 showModalDialog polyfill을 <dialog> 태그를 사용하여 사용할 수 있습니다.

Answer 4

왜 window.showModalDialog가 사용되지 않습니까? http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/에서

, 일반적으로

는 브라우저에 기본 대화 상자 구현을두기의 아이디어는 정말 좋은 생각했지만, window.showModalDialog는 문제와 가난한 브라우저 지원 투성이 나쁜 구현했다 . (...)

참고 (...) [showModalDialog를 사용하여 모달 대화 상자] 전체 HTML 문서,하지에 주입하는 조각이다.이 window.showModalDialog의 특징 기능입니다. 실제로 서로 통신하는 두 개의 창이 완전히 입니다. 두 개의 개별 창과 DOM이 있다는 사실은 JS & DOM 충돌에 대해 걱정할 필요가 없음을 의미합니다. 복잡한 JavaScript가 많이있는 경우에는 유용합니다. 흩어져있는 전역 범위. 하지만 대부분이 불필요한 복잡성을 추가하고 브라우저 구현을 복잡하게 만들고 개의 버그에 기여합니다. (...)

는 모달 대화 상자가 원래 윈도우와 상호 작용 에서 사용자를 방지하는 것이 중요하지만

, 다시 사용자 다른 탭이나 기본 브라우저 컨트롤과 상호 작용하도록 허용해서는 안 이유 (/ 앞으로이 없다, 즐겨 찾기, 주소 표시 줄 등). (...) 이것은 실제로 이며 최종 사용자에게는 큰 불편을줍니다. (...)

window.showModalDialog에 대한 디버깅 경험은 끔찍합니다. (...) 근본적으로 그것이 일어나고있는 것을 로 결정하기 위해 1999 년처럼 경고해야합니다. (...)

현재 보조 모바일 브라우저가 window.showModalDialog, 을 지원하지 않으므로 어떤 종류의 태블릿/모바일 지원을 원할 경우 이 필요합니다.

대신 무엇을 사용해야합니까?

HTML5는 새로운 <dialog> 요소를 도입했습니다.이 요소는 모달을 포함하여 대화 상자를 표시하는 데 사용할 수 있습니다. 예를 들어

:

• 브라우저 지원은 무시할 수 있지만, polyfill가 :

  <dialog id="myDialog"> 
      Foo bar 
      <button id="hide">Close</button> 
  </dialog> 
  <button id="show">Show Dialog</button> 
  

  var dialog = document.getElementById('myDialog'); 
  document.getElementById('show').onclick = function() { dialog.showModal(); }; 
  document.getElementById('hide').onclick = function() { dialog.close();  }; 
  

  Demo

  문제는 있습니다.

• 아니요. pause JS 실행.