>  기사  >  백엔드 개발  >  자바스크립트 팝업창 기술 요약 공유

자바스크립트 팝업창 기술 요약 공유

小云云
小云云원래의
2018-03-15 14:12:151265검색

이 글에서는 주로 자바스크립트 팝업 창에 대한 기술 요약을 공유합니다. 다음은 팝업 창의 일부 매개변수입니다. 매개변수는 선택사항이며 쉼표로 구분됩니다. 문자열 --객체 테이블을 쉼표로 구분하여 나열합니다. 각 항목에는 고유한 값이 있으며 구분됩니다(예: "fullscreen=yes, toolsbar=yes"). 다음은 지원되는 다양한 기능입니다.

기본값은 yes기본값은 no최소값은 100입니다값은 0기본값은 yes입니다기본값은 yes입니다. titlebar = { yes | no | }width = number top = number

1. 가장 기본적인 팝업창 코드  

 2ec7761c62b319a0d8f749487b7dc096 
  b7611806ba5d3b1e1004f4f3c5b20d24 
  db271416853c42fd247a57c1a2c29eb6

  
 자바스크립트 코드이므로

사이에 넣어야 합니다.

일부 오래된 브라우저에서는 작동합니다. 이러한 오래된 브라우저에서는 태그의 코드가 텍스트로 표시되지 않습니다. 이 좋은 습관을 기르십시오. window.open('page.html')은 새 창인 page.html의 팝업을 제어하는 ​​데 사용됩니다. page.html이 기본 창과 동일한 경로에 없으면 앞에 경로를 명시해야 합니다. 절대 경로(http://) 및 상대 경로(../)가 허용됩니다. 작은따옴표나 큰따옴표를 사용할 수 있지만 혼합하지 마세요. 이 코드 조각은 HTML의 어느 위치에나 추가할 수 있습니다. 코드가 빠를수록 더 빨리 실행됩니다. 특히 페이지 코드가 길어서 페이지가 더 일찍 나타나도록 하려는 경우에는 더욱 그렇습니다. 최대한 앞쪽으로 넣으려고 노력하세요.
 
2. 설정 후 팝업창
 
이제 팝업창 설정에 대해 알아보겠습니다. 위의 코드에 조금 더 추가하면 됩니다. 페이지의 특정 조건에 맞게 이 팝업 창의 모양, 크기 및 팝업 위치를 사용자 정의해 보겠습니다.

 2ec7761c62b319a0d8f749487b7dc096 
  bc246c57ad82c9647b736d9a190aab97 
  db271416853c42fd247a57c1a2c29eb6

 
 매개변수 설명:  
 0df24357f4a395f29351d2fd9f7c0aaa 새 창을 표시하는
 window.open 명령 팝업 창의 파일 이름; ;
 'newwindow' 팝업 창의 이름(파일 이름 아님)은 선택 사항이며 빈 ''으로 대체할 수 있습니다.
 Height=100 창 높이
width=400 창 너비;
left=0 화면 왼쪽의 창 픽셀 값
 toolbar=no 도구 모음 표시 여부, yes는 표시를 의미합니다. 바와 스크롤바.
  resizing=no 창 크기 변경 허용 여부, yes 허용
  Location=no 주소 표시줄 표시 여부, yes 허용
 status=no 상태 표시줄에 정보 표시 여부(보통 파일)
  db271416853c42fd247a57c1a2c29eb6 js 스크립트 종료


3. 함수를 사용하여 팝업 창 제어

  

 다음은 전체 코드입니다.  

<html> 
  <head> 
  <script LANGUAGE="JavaScript"> 
  <!-- 
  function openwin() { 
  window.open ("page.html", "newwindow", "height=100, 
width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, 
status=no") 
//写成一行
  } 
  //--> 
  </script> 
  </head> 
  <body onload="openwin()"> 
  任意的页面内容... 
  </body> 
  </html>

  여기에는 openwin() 함수가 정의되어 있으며 함수 내용은 창을 여는 것입니다. 호출되기 전까지는 아무 소용도 없습니다. 어떻게 부르나요?

 

방법 1

: cc110a74de578da962e6104bca52df40 브라우저가 페이지를 읽을 때 창이 나타납니다.
  방법 2: f3d70d06647915803b2b73d181516bbb 브라우저가 페이지를 떠날 때
  방법 3: 연결을 통해 호출:
  a35d18e36b8c599008234594c20f6a6f창 열기5db79b134e9f6b82c0b36e0489ee08ed #' 사용된 것은 가상 연결입니다.  방법 4
: 버튼으로 호출:
 0f78feca25f4905ef8470d2f0eb837f9
  4 동시에 2개의 창 팝업


  소스로 코드 살짝 수정:  

<script LANGUAGE="JavaScript"> 
  <!-- 
  function openwin() { 
  window.open ("page.html", "newwindow", "height=100, 
width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
location=n o, status=no") 
//写成一行
 
  window.open ("page2.html", "newwindow2", "height=100, 
width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
loca tion=no, status=no") 
//写成一行
 
  } 
  //--> 
  </script>

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

 

Note
: 두 창(newwindows 및 newwindow2)의 이름은 동일하지 않거나 모두 비어 있어야 합니다.

5. 메인 창에서 1.htm 파일을 열면 작은 창인 page.html이 동시에 메인 창 영역에 나타납니다. " onclick="openwin()" >열기5db79b134e9f6b82c0b36e0489ee08ed.
6. 팝업 창 닫기 제어

 

  다음으로 팝업 창에 대한 몇 가지 제어를 수행하면 효과가 더 좋아질 것입니다. 팝업 페이지에 작은 코드 조각을 추가하여(메인 페이지가 아닌 page.html의 HTML에 추가된다는 점 참고) 10초 후에 자동으로 닫히도록 하면 더 멋지지 않을까요?

먼저 page.html 파일 영역에 다음 코드를 추가합니다.


 

<script language="JavaScript"> 
  function closeit() 
  { 
  setTimeout("self.close()",10000)  
//毫秒
 
  } 
  </script>

  然后,再用0b774bfd64a2e0c25f227b95b95c6f4b 这一句话代替page.html中原有的a64997a0904a094b4570728d7f327acd这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
7、在弹出窗口中加上一个关闭按钮

  

<FORM> 
  <INPUT TYPE=&#39;BUTTON&#39; VALUE=&#39;关闭&#39; onClick=&#39;window.close()&#39;> 
  </FORM>


  呵呵,现在更加完美了!
8、内包含的弹出窗口-一个页面两个窗口  上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。

 <html> 
  <head> 
  <SCRIPT LANGUAGE="JavaScript"> 
  function openwin() 
  { 
  OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no 
,scrollbars="+scroll+",menubar=no"); 
  //写成一行 
  OpenWindow.document.write("<TITLE>例子</TITLE>") 
  OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
  OpenWindow.document.write("<h1>Hello!</h1>") 
  OpenWindow.document.write("New window opened!") 
  OpenWindow.document.write("</BODY>") 
  OpenWindow.document.write("</HTML>") 
  OpenWindow.document.close() 
  } 
  </SCRIPT> 
  </head> 
  <body> 
  <a href="#" onclick="openwin()">打开一个窗口</a> 
  <input type="button" onclick="openwin()" value="打开窗口"> 
  </body> 
  </html>

  看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。
9、终极应用--弹出的窗口之Cookie控制
  回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,我们使用cookie来控制一下就可以了。
  首先,将如下代码加入主页面HTML的ef1cac8df639bc9110cb13b8b5ab3dd7区:

  

<script> 
  function openwin(){ 
  window.open("page.html","","width=200,height=200") 
  } 
  function get_cookie(Name) { 
  var search = Name + "=" 
  var returnvalue = ""; 
  if (document.cookie.length > 0) { 
  offset = document.cookie.indexOf(search) 
  if (offset != -1) { 
  offset += search.length 
  end = document.cookie.indexOf(";", offset); 
  if (end == -1) 
  end = document.cookie.length; 
  returnvalue=unescape(document.cookie.substring(offset, end)) 
  } 
  } 
  return returnvalue; 
  }  
  function loadpopup(){ 
  if (get_cookie(&#39;popped&#39;)==&#39;&#39;){ 
  openwin() 
  document.cookie="popped=yes" 
  } 
  } 
  </script>

然后,用bd9cbe48f9f8591cb0122fce262b0eaa(注意不是openwin而是loadpop啊!)替换主页面中原有的a64997a0904a094b4570728d7f327acd这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。 

相关推荐:

jQuery实现简单的弹出窗口实例

JS弹出窗口的运用与技巧大全

jQuery实现的模拟弹出窗口功能示例

channelmode = { yes | no | 0 } 창에 사다리 모드를 표시할지 여부 directories = { yes | no | 창에 래더 모드를 표시할지 여부
fullscreen = { yes | no | 1 | 0 } 브라우저를 전체 화면 모드로 표시할지 여부
height = number 창 지정 높이, 단위는 픽셀
left = number 왼쪽 테두리에서 창까지의 거리를 지정합니다. 단위는 픽셀
location = { yes | no | 1 | 0 } 창에 주소 표시줄을 표시할지 여부를 지정하세요
menubar = { yes | no | 0 } 메뉴바 표시 여부 지정
ressible = { yes | no 1 | 사용자가 크기를 조정할 수 있는 창의 핸들 기본값은 yes입니다
scrollbars = { yes | no | 1 | 0 } 창에 가로 또는 세로 스크롤 막대를 표시할지 지정하세요 기본값은 yes
status = { yes | no | 0} 창에 상태 표시줄을 표시할지 지정합니다
창에 제목 표시줄을 표시할지 여부를 지정합니다. 호출하지 않는 HTML 애플리케이션이나 대화 상자의 경우 기본값은 yes입니다. 앞으로, 뒤로, 중지 등의 버튼이 포함됩니다. 기본값은 yes입니다
창의 너비를 지정합니다. 단위는 픽셀입니다. 최소값은 100
창의 상단을 지정합니다. 위치, 단위는 픽셀입니다. 값은 다음보다 크거나 같아야 합니다. 0

위 내용은 자바스크립트 팝업창 기술 요약 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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