JS 팝업창 코드 모음(세부 정리)_javascript 기술

웹페이지를 이용해 다양한 형태의 창을 띄우는 방법은 대부분 아시리라 생각합니다. 하지만 다양한 팝업창을 만드는 방법은 오늘 배워보겠습니다:
1. 전체화면 창 띄우기

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

www.jb51.net

2. F11 지원 창 열기

코드는 다음과 같습니다.

www.jb51.net

3. 즐겨찾기 링크 툴바가 있는 창 띄우기
코드 복사

코드는 다음과 같습니다. www.wangye8.com

웹페이지 대화상자

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

SCRIPT LANGUAGE="javascript">

www. wangye8.com

http://www.wangye8.com ;/body>



showModalDialog() 또는 showModelessDialog() showModalDialog()와 showModelessDialog()의 차이점은 다음과 같습니다. showModalDialog()(줄여서 모달 창)에 의해 열림은 상위 창에 배치되며 상위 창에 액세스하려면 닫혀야 합니다(불쾌함을 피하기 위해 가능한 한 적게 사용하는 것이 좋습니다). showModelessDialog()
dialogHeight: iHeight는 대화 상자 창 높이를 설정합니다.
dialogWidth: iWidth는 대화 상자 창의 너비를 설정합니다.
dialogLeft: iXPos는 데스크탑의 왼쪽 상단 모서리를 기준으로 대화 상자 창의 왼쪽 위치를 설정합니다.
dialogTop: iYPos는 바탕 화면의 왼쪽 상단을 기준으로 대화 상자 창의 상단 위치를 설정합니다.
center: {yes | no | 1 | 0} 기본값은 "yes"입니다.
help: {yes | no 1 | 0} 대화 상자 창에 상황에 맞는 도움말 아이콘을 표시할지 여부를 지정합니다. 기본값은 "예"입니다.
resised: {yes | no 1 | 0} 대화 상자 창의 크기를 조정할 수 있는지 여부를 지정합니다. 기본값은 "아니요"입니다.
status: {yes | no 1 | 0 } 대화 상자 창에 상태 표시줄을 표시할지 여부를 지정합니다. 모덜리스 대화 상자 창의 경우 기본값은 "yes"이고 모달 대화 상자 창의 경우 "no"입니다.


5. 기타 팝업창 코드

인터넷 서핑을 자주 하는 친구들은 홈페이지에 들어가자마자 어떤 사이트에 접속해 본 적이 있을 텐데요, 또는 링크나 버튼이 나타납니다. 일반적으로 이 창에는 작성자가 특별히 상기시켜 주고 싶은 일부 메모, 저작권 정보, 경고, 환영 메시지 또는 기타 정보가 표시됩니다. 실제로 이러한 페이지를 만드는 것은 매우 쉽습니다. 페이지의 HTML에 몇 가지 자바스크립트 코드만 추가하면 됩니다. 아래에서는 그 미스터리를 분석해 보겠습니다.


[가장 기본적인 팝업창 코드]

사실 코드는 매우 간단합니다.




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


이것은 자바 스크립트 코드이므로 사이에 배치되어야 합니다. 는 일부 이전 브라우저에 효과적입니다. 이러한 이전 브라우저에서 자바스크립트가 지원되지 않으면 태그의 코드가 텍스트로 표시되지 않습니다.
Window.open('page.html')은 새 창인 page.html의 팝업을 제어하는 ​​데 사용됩니다. page.html이 기본 창과 동일한 경로에 없으면 경로를 명시해야 합니다. 전면에서는 절대 경로(http:// )와 상대 경로(../)를 사용할 수 있습니다.
작은따옴표나 큰따옴표를 사용할 수 있지만 혼합하지 마세요.
이 코드 조각은 HTML의 어느 위치에나 추가할 수 있으며, 와 사이에 추가할 수 있습니다. 특히 페이지 코드가 길고 원하는 경우 더 빨리 실행됩니다. 페이지를 만들려면 일찍 뜨면 최대한 앞쪽에 넣으세요.

[설정 후 팝업창]
팝업창 모양 설정에 대해 이야기해보겠습니다. 위의 코드에 조금 더 추가하면 됩니다.
이 팝업창의 모양, 크기, 팝업 위치를 페이지의 특정 조건에 맞게 맞춤설정해 보겠습니다.

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

...모든 페이지 콘텐츠...
;



여기에는 openwin() 함수가 정의되어 있으며 함수 내용은 창을 여는 것입니다. 호출되기 전까지는 아무 소용도 없습니다. 어떻게 부르나요?
방법 1: 브라우저가 페이지를 읽을 때 창이 나타납니다.
방법 2: 브라우저가 페이지를 떠날 때 창이 나타납니다. 연결을 통한 통화: < ;a href="#" >창 열기
참고: 사용된 "#"은 가상 연결입니다.
방법 4: 버튼을 사용하여 호출:

[기본 창에서 1.htm 파일이 열리고 작은 창 페이지가 동시에 나타납니다.html】

메인 창의 영역에 다음 코드를 추가합니다.



코드 복사

코드는 다음과 같습니다.

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

[Add a in the 팝업창 닫기 버튼】

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

하하, 이제 더 완벽해졌네요!
[팝업창 포함 - 한 페이지에 2개의 창]
위 예시에는 모두 2개의 창이 포함되어 있는데, 하나는 메인 창이고 다른 하나는 작은 팝업 창입니다.
다음 예시를 사용하면 위의 효과를 한 페이지에 완성할 수 있습니다.

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

head>


창