대화 상자를 팝업하는 9가지 js 메소드 요약_javascript 기술-JS 튜토리얼-php.cn

[1.가장 기본적인 js 팝업 대화상자 창 코드]

이것은 가장 기본적인 js 팝업 대화 상자입니다. 실제로 코드는 매우 간단합니다.

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

이것은 자바스크립트 코드이므로 사이에 배치되어야 합니다. 는 일부 이전 브라우저에 효과적입니다. 이러한 이전 브라우저에서는 태그의 코드가 텍스트로 표시되지 않습니다. 이 좋은 습관을 기르십시오.

window.open("page.html")은 새 창인 page.html의 팝업을 제어하는 데 사용됩니다. page.html이 기본 창과 동일한 경로에 없으면 경로를 다음과 같이 작성해야 합니다. 전면에서는 절대 경로(http:// )와 상대 경로(../)를 사용할 수 있습니다. 작은따옴표나 큰따옴표를 사용할 수 있지만 혼합하지 마세요.
이 코드는 HTML의 와 사이, 사이에 추가할 수 있습니다. 특히 페이지 코드가 긴 경우에는 이런 종류의 js 팝업 대화 상자가 최대한 빨리 나타나도록 하려면 최대한 앞쪽에 배치해야 합니다.

[2. 속성 설정을 위한 js 팝업 대화상자 코드 추가]

JS 팝업 대화 상자 창 속성 설정에 대해 이야기해 보겠습니다. 위의 코드에 조금 더 추가하면 됩니다.
이 js 팝업 대화 상자에 나타나는 창의 모양, 크기, 팝업 위치를 페이지의 특정 조건에 맞게 사용자 정의해 보겠습니다.

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

코드 보기

js 스크립트 끝

이 허용됩니다.

[3. js 팝업 대화 상자 창을 제어하는 기능을 사용하세요]

다음은 완전한 js 팝업 대화 상자에 대한 코드입니다.

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

코드 보기

두 개의 팝업창이 서로 가리지 않도록 위쪽과 왼쪽을 이용하여 팝업 위치를 조절하세요. 마지막으로 위에서 언급한 네 가지 방법을 사용하여 호출할 수 있습니다.

참고: 두 개의 js 팝업 대화 상자 창(newwindows 및 newwindow2)의 이름은 동일하지 않아야 하며 모두 비어 있어야 합니다.

[5. 메인창에서 1.htm 파일을 열면 작은창인 page.html이 동시에 뜹니다]

메인 창

영역에 다음 코드가 추가됩니다.

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

코드 보기

영역에 참여하세요:

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

열기

바로 그거예요.

[6. js 팝업 대화상자 창 종료 타이밍 제어]

다음으로 js 팝업 대화 상자의 창을 제어해 보면 효과가 더 좋아질 것입니다. 팝업 페이지에 작은 코드 조각을 추가하면(메인 페이지가 아닌 page.html의 HTML에 추가된다는 점에 유의하세요. 그렇지 않으면...), 팝업 페이지가 자동으로 닫히면 더 멋지지 않을까요? 10초?

먼저 page.html 파일의 영역에 다음 코드를 추가하세요.

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

그런 다음 < body onload ="closeit()"> 이 문장은 page.html의 원래 문장을 대체할 수 있습니다. (이 문장을 꼭 작성해주세요! 이 문장의 기능은 창을 닫는 코드를 호출하고, 10초 후에 자동으로 창을 닫는 것입니다.)

【7.js 팝업 대화창에 닫기 버튼 추가】

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

하하, 이제 더 완벽해졌습니다!
[8. 포함된 js 팝업 대화 상자 창 - 한 페이지에 두 개의 창이 있음]

위의 예에는 모두 두 개의 창이 포함되어 있습니다. 하나는 기본 창이고 다른 하나는 팝업 작은 창입니다.

다음 예시를 사용하면 위의 효과를 한 페이지에 완성할 수 있습니다.

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

코드 보기

창 열기

OpenWindow.document.write()의 코드를 보세요. 표준 HTML이 아닌가요? 형식에 따라 더 많은 줄을 작성하십시오. 라벨이 1개 더 많거나 1개 적으면 오류가 발생하므로 주의하세요. OpenWindow.document.close()로 끝내는 것을 잊지 마세요.

[9. 궁극적인 애플리케이션 - JS 팝업 대화 상자 창 쿠키 제어]

위 팝업창은 멋지지만 약간의 문제가 있다는 점을 기억하세요(기쁨에 푹 빠져 계시다면 눈치채지 못하셨겠죠?) 예를 들어 위 스크립트를 다음 페이지에 넣으면 자주 전달해야 하는 경우(예: 홈페이지), 페이지를 새로 고칠 때마다 창이 자동으로 js 팝업 대화 상자 코드를 한 번 실행합니다. 매우 짜증나지 않나요? :-(해결책이 있나요? 예! ;-) 따라오세요.

당사는 이를 제어하기 위해 쿠키를 사용합니다.

먼저 메인 페이지 HTML의 영역에 다음 코드를 추가합니다.

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

코드 보기