>웹 프론트엔드 >JS 튜토리얼 >JavaScript는 모달 대화 상자 소스 코드 collection_javascript 기술을 구현합니다.

JavaScript는 모달 대화 상자 소스 코드 collection_javascript 기술을 구현합니다.

WBOY
WBOY원래의
2016-05-16 18:53:291260검색

먼저 대화 상자에 대해 이야기해 보겠습니다.
대화 상자는 Windows 응용 프로그램에서 매우 일반적으로 사용됩니다. 많은 응용 프로그램 설정 및 사용자와의 상호 작용에는 대화 상자가 필요하므로 대화 상자는 Windows 응용 프로그램에서 가장 중요합니다. 사용자와 상호작용하는 중요한 수단. 대화 상자는 특별한 창이므로 창에서 수행되는 모든 작업(예: 이동, 최대화, 최소화 등)도 대화 상자에서 수행할 수 있습니다.
대화 상자는 크게 다음 두 가지 유형으로 나눌 수 있습니다.
(1) 모달 대화 상자: 모달 대화 상자가 나타난 후에는 사용자가 대화 상자를 닫은 후에만 시스템 리소스를 독점적으로 점유할 수 있습니다. . 대화 상자를 닫기 전에 애플리케이션의 다른 부분에서 코드를 실행하는 기능. 모달 대화 상자에서는 일반적으로 사용자가 어떤 종류의 선택을 해야 합니다.
(2) 넌모달 대화 상자: 넌모달 대화 상자가 나타난 후 대화 상자를 닫지 않고도 프로그램을 계속 실행할 수 있으며, 다른 코드로 전송할 때 사용자는 아무것도 할 필요가 없습니다. 응용 프로그램의 일부가 응답합니다. 모덜리스 대화 상자는 일반적으로 정보를 표시하거나 실시간으로 일부 설정을 지정하는 데 사용됩니다.
모달 창은 전통적인 프로그래밍 언어에서 매우 일반적입니다. 간단히 말해서 모달인 경우 하위 창이 닫히지 않으면 해당 상위 창을 실행할 수 없으며 원래 프로그램 실행이 실행됩니다. 일시 중단되면 원래 프로그램으로 돌아가서 모달 창이 닫힐 때까지 계속합니다.
비모달이 직접 표시되고, 이후 원래 프로그램은 계속해서 다음 명령문을 실행하며, 다른 창도 사용할 수 있습니다.
모달 대화 상자는 사용자의 입력을 독점합니다. 모달 대화 상자가 열리면 사용자는 대화 상자와 상호 작용만 할 수 있으며 다른 사용자 인터페이스 개체는 입력 정보를 받을 수 없습니다. 응용 프로그램에서 사용하는 대부분의 대화 상자는 모달 대화 상자입니다.
일반적으로 windwo.open이나 브라우저의 하이퍼링크를 통해 나타나는 새 창은 비모달 창인 반면, 모달 창은 다른 이벤트에 응답하기 위해 닫아야 하는 경고와 같은 창입니다.
대화 상자의 모달리티와 넌모달리티를 이해하면서 다음을 살펴보겠습니다. B/s 구조 애플리케이션을 개발할 때 때때로 사용자가 원래 창 앞에 남아 있는 하위 창을 열도록 하고 싶습니다.
IE에서는 window.showModelessDialog() 메서드를 사용하여 HTML 콘텐츠를 표시하는 비모달 대화 상자를 만들 수 있습니다. window.showModalDialog() 메서드는 HTML 내용을 표시하는 모달 대화 상자를 만드는 데 사용됩니다. 대화 상자는 일반적으로 window.open()으로 열리는 창의 모든 속성을 갖고 있지 않습니다.
window.showModalDialog 팝업 창의 인스턴스 함수는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. :



예:
코드 복사 코드는 다음과 같습니다.

클릭

FireFox 브라우저에서는 showmodaldialog()가 지원되지 않는다는 점에 유의해야 합니다. 원래 MozillaSuite(Firefox는 이 제품군에서 파생됨)에서는 showmodaldialog()를 지원했지만 나중에 showmodaldialog()에 보안 위험이 있다는 사실이 발견되어 showmodaldialog()에 대한 지원이 곧 제거되었습니다. 이는 버그 194404가 제출되기 전에 발생했습니다. 더 나은 해결책을 찾을 때까지 Firefox는 showmodaldialog()에 대한 지원을 제공하지 않을 것이라고 생각합니다.

팝업 창을 열려면 window.open만 사용하여 이 기능을 수행할 수 있습니다. window.open의 구문은 다음과 같습니다.
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace ])

Firefox에서는 sFeature의 window.open 매개변수에 더 많은 기능 설정이 있습니다. FireFox에서 열리는 창을 다음과 동일하게 만들 수 있습니다. IE의 showModalDialog, sFeatures =yes에 모달을 추가하면 충분합니다. 아마도 보안상의 이유로 modal=yes, 열린 창은 모달 창이 아닙니다. 예는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다:

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

firefox showModalDialog 메소드에서는 사용할 수 없기 때문입니다. 그런 다음 두 브라우저 모두 호환되도록 다음 판단을 사용하십시오.
코드 복사 코드는 다음과 같습니다.





2. JavaScript div는
163 메일함 대화상자와 유사한 기능입니다. 이 효과를 달성하는 데는 주로 두 개의 레이어가 있습니다. 첫 번째는 아래의 전체 페이지를 잠그는 데 사용되는 레이어입니다. 필터:알파(불투명도=50)를 사용할 수 있습니다. 대화 상자의 내용을 표시하는 데 사용되는 레이어도 있으므로 zIndex 매개 변수는 주파수 잠금 레이어보다 높게 설정되어야 합니다.

대화 상자의 CSS를 직접 정의할 수 있습니다. CSS의 본문은 margin:0을 정의해야 합니다. 그렇지 않으면 주파수를 잠글 때 간격이 나타나 불완전한 주파수 잠금 문제가 발생합니다. 하나는 Select 컨트롤의 문제입니다. IE에서는 zIndex가 매우 높기 때문에 주파수 잠금 레이어가 이를 처리할 수 없습니다. 여기서 사용할 수 있는 두 가지 방법이 있습니다. 하나는 이를 숨기는 것이고, 다른 하나는 비활성화하는 것입니다. 속성이 false로 설정된 경우 두 번째 방법은 편집을 비활성화할 수만 있지만 여전히 주파수 잠금 레이어에 속아 효과가 좋지 않으므로 숨기는 것이 좋습니다.



코드 복사 코드는 다음과 같습니다.


`````












11 22
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.