퍼블리싱/JS & JQ

윈도우 팝업띄우기

Slyeee 2018. 11. 1. 13:47
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
2
3
4
5
6
7
<script type="text/javascript">  
  function openWin(){  
      window.open("http://www.naver.net", "네이버새창", "width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes" );  
  }
</script>  
  
<input type=button value="새창띄우기" onclick="javascript:openWin();">
cs


2. 새창 띄우는 방법


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



3. 새창 닫기


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