우리가 사는 세상을 모두 알기엔 인생은 너무 짧다.!!

사이트관리

Javascript 팝업 창 띄우고 닫기 (window.open / close)

거북선인 2018. 3. 13. 15:31
반응형
  1. // 팝업 창 띄우기
  2.  
  3. function goPopup() {
  4.     var requestValue = document.getElementById("Name").value;                  // 전송 파라미터 값
  5.     var theURL = "/servlet/servlet.ExampleOpenUrl?requestValue="+requestValue; // 전송 URL
  6.     // 팝업 창 로드 (window.open)
  7.     window.open(theURL, "Example", "scrollbars=no,width=900,height=500,menubar=false");
  8.     // window.open(URL,"팝업 구분값(팝업 1개일 경우 상관없음)","팝업 창 옵션")
  9. }
  10.  
  11.  
  12. // Popup Option
  13.  
  14. toolbar = yes/no       //상단 도구창 출력 여부
  15. menubar = yes/no       //상단 메뉴 출력 여부
  16. location = yes/no      //메뉴아이콘 출력 여부
  17. directories = yes/no   //제목 표시줄 출력 여부
  18. status = yes/no        //하단의 상태바 출력 여부
  19. scrollbals = yes/no    //스크롤바 사용 여부
  20. resizable = yes/no     //팝업창의 사이즈 변경 가능 여부
  21.  
  22. width = 10           //팝업창의 가로 길이 설정 (10px)
  23. height = 10          //팝업창의 세로 길이 설정 (10px)
  24. top = 10             //팝업창이 뜨는 위치(화면 위에서부터의 거리 지정) (10px)
  25. left = 10            //팝업창이 뜨는 위치(화면 왼쪽에서부터의 거리 지정) (10px)
  26.  
  27.  
  28. // 팝업 창 닫기
  29.  
  30. function selectValue(){
  31.    
  32.     var requestValue = document.getElementById("Name").value;                   // 전송 파라미터 값
  33.     var theURL = "/servlet/servlet.ExampleCloseUrl?requestValue="+requestValue; // 전송 URL
  34.     // 호출 한 부모 페이지에서 URL 호출
  35.     opener.window.location = url;
  36.     // 호출 한 뒤 현재 팝업 창 닫기 이벤트
  37.     close();

 

 

 

[javascript] 새창 띄우기 ( window.open )

 

1. window.open(URL,WindowName[,WindowFeatures]);

 

1) URL


- 웹 문서 URL

 

2) WindowName

 

- open 창 이름

 

3) WindowFeatures

 

- fullscreen = 전체 창. (yes/no)(default : no)

- location = 주소창이 활성화. (yes/no)(default : yes)

- menubar = 메뉴바 visible. (yes/no)(default : yes)

- titlebar = 타이틀바. (yes/no)(default : yes)

- toolbar = 툴바. (yes/no)(default : yes)

- resizable = 창 사이즈 변경. (yes/no)(default : yes)

- scrollbars = 스크롤바. (yes/no)(default : yes)

- width = 창 가로 크기

- height = 창 세로 크기

 

  1. <script language="javascript" type="text/javascript">  
  2. <!--  
  3. function openWin(){  
  4.     window.open("http://www.naver.net""네이버새창""width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes" );  
  5. }  
  6. //-->  
  7. </script>  
  8.   
  9. <input type=button value="새창띄우기" onclick="javascript:openWin();">  

<textarea class="javascript" style="HEIGHT: 54px; DISPLAY: none; WIDTH: 957px" rows="3" cols="115" name="code"><script language="javascript" type="text/javascript"><!-- function openWin(){ window.open("<A href="http://www.naver.net/">http://www.naver.net</A>", "네이버새창", "width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes" ); }//--></script> <input type=button value="새창띄우기" onclick="javascript:openWin();"></textarea>

 

 

 

 

2. 새창 띄우는 방법

  1. <script language="javascript">  
  2. <!--  
  3. function openWin(){  
  4.     window.open("http://www.naver.net""네이버새창""width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes" );  
  5. }  
  6. //-->  
  7. </script>  
  8.   
  9. <!-- onclick 이벤트에 직접 입력 -->  
  10. <a href="#" onClick="window.open('http://www.naver.com','네이버','width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes');return false;">네이버 새창 열기</a>   
  11.   
  12. <!-- onclick 이벤트에 javascript 함수 호출-->  
  13. <a href="#" onClick="javascript:openWin();">네이버 새창 열기</a>   

<textarea class="javascript" style="HEIGHT: 54px; DISPLAY: none; WIDTH: 957px" rows="3" cols="115" name="code"><script language="javascript"><!--function openWin(){ window.open("<A href="http://www.naver.net/">http://www.naver.net</A>", "네이버새창", "width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes" ); }//--></script><!-- onclick 이벤트에 직접 입력 --> <a href="#" onClick="window.open('<A href="http://www.naver.com/">http://www.naver.com</A>','네이버','width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes');return false;">네이버 새창 열기</a> <!-- onclick 이벤트에 javascript 함수 호출--> <a href="#" onClick="javascript:openWin();">네이버 새창 열기</a> </textarea>

 

 

 

3. 새창 닫기

  1. ?<script language="javascript">  
  2. <!--  
  3.     function closeWindow() {  
  4.             setTimeout(function() {  
  5.         window.close();  
  6.             }, 3000);  
  7.         }  
  8.   
  9.     // 창이 열린 후 3초후에 닫기  
  10.     window.onload = closeWindow();  
  11. //-->  
  12. </script>  
  13.   
  14. <!-- onclick 이벤트에 직접 입력 -->  
  15. <a href="#" onClick="self.close();">새창 닫기</a>   
  16. <a href="#" onClick="javascript:closeWindow();">3초후에 닫기</a>  
반응형