팝업창 옵션
----------------------------------------
no, 1을 사용
width=800 : 팝업창의 넓이
height=600 : 팝업창의 높이
top=0 : 팝업창이 뜰 위치
left=0 : 팝업창이 뜰 위치
resizable=1 : 창크기 조정가능
scrollbars=1 : 스크롤바
menubar=1 : 메뉴
toolbar=1 : 메뉴아이콘
location=1 : 제목표시줄
directories=1 : 연결버튼(핫메일 등)
status=1 : 하단의 상태바
■ 입장시 팝업창 띄우기
----------------------------------------
<head>
<title>입장시 자동으로 팝업창 띄우기</title>
<!-- 삽입해야 할 소스 시작 -->
<script language="javascript">
<!--
function OpenWindow() {
window.open("insa-hi.html","_blank","top=0,left=0,width=470,height=340,resizable=1,scrollbars=no");
}
//-->
</script>
</head>
<body onLoad="OpenWindow()">
<!-- 삽입해야 할 소스 끝 -->
또는
<!-- 삽입해야 할 소스 시작 -->
<body onload="window.open('insa-hi.html', 'new', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no, resizable=no,width=470,height=340')">
<!-- 삽입해야 할 소스 끝 -->
■ 퇴장시 팝업창 띄우기
----------------------------------------
<!-- 삽입해야 할 소스 시작 -->
<body onunload="popup();">
<script language=javascript>
<!--
function popup()
{
window.open("testby.html", "_blank",
"top=0,left=0,width=463,height=178" +
",toolbar=1,status=1,scrollbars=0,resizable=0");
}
-->
</script>
<!-- 삽입해야 할 소스 끝 -->
또는
<!-- 삽입해야 할 소스 시작 -->
<body onunload="window.open('testby.html')">
<!-- 삽입해야 할 소스 끝 -->
■ 클릭을 하면 팝업창이 뜨는 스크립트
----------------------------------------
<title>링크 클릭시 팝업창 띄우기</title>
<!-- 삽입해야 할 소스 시작 -->
<script language="javascript">
<!--
function OpenWindow(url,intWidth,intHeight) {
window.open(url, "_blank", "width="+intWidth+",height="+intHeight+",resizable=1,scrollbars=1") ;
}
//-->
</script>
</head>
<body>
<br>
<center>
<a href="javascript:OpenWindow('insa-hi.html','470','340')">여기를 누르면 새로운 창을 띄웁니다.</a>
</center>
<!-- 삽입해야 할 소스 끝 -->
</body>
■ 입장시와 퇴장시에 모두 팝업창 띄우기
----------------------------------------
<!-- 삽입해야 할 소스 시작 -->
<!--입장 팝업 소스 -->
<body onunload="popup();">
<scRIPT LANGUAGE="Javascript">
<!--
function popup( partner )
{
window.open("insa-hi.html", "_blank", "top=0,left=0,width=450,height=340",
"toolbar=1,status=1,scrollbars=1,resizable=1");
}
popup( );
-->
</scRIPT>
<!--퇴장 팝업 소스 -->
<script language=javascript>
<!--
function popup()
{
window.open("insa-by.html", "_blank", "top=0,left=0,width=470,height=350",
"toolbar=1,status=1,scrollbars=0,resizable=0");
}
-->
</script>
<!-- 삽입해야 할 소스 끝 -->
----------------------------------------------------------------------------------------
■ 메뉴바나 상태바가 없는 그러한 작은 창이 뜨게 하는 방법은 다음과 같다.
자바스크립터의 window.open이라는 명령어를 주죠...^^
윈도우제어의 기본적인 틀은.. <script>window.open(띄우고자하는주소)</script>
이런꼴입니다...
여기에 옵션을 줄수 있습니다..
menubar yes/no : 윈도우의 menubar 표시여부
toolbar yes/no : 윈도우의 toolbar 표시여부
location yes/no : 윈도우의 location box 표시여부
directories yes/no : 윈도우의 directory button들의 출력여부
status yes/no : 윈도우의 상태표시줄 표시여부
scrollbars yes/no : 윈도우의 가로 세로 scrollbar 표시여부
resizable yes/no : 윈도우의 크기가 조정될 수 있는 지 결정
width : 윈도우의 너비 결정
height : 윈도우의 높이 결정
이런식이죠....
만약 창의 크기를 가로 350픽셀 세로 400픽셀 스크롤바를 주고 메뉴바를 주게해서 띄울려면
<script>window.open("주소","small",'width=350,height=400,scrollbars=yes,menubar=yes')</script> 이런식으루 하면 되는거죠...^^
또한 자동팝업이 아니라 링크를 클릭하면 새창이 뜨게 할려면
<a href="#" onclick="window.open('주소','small','width=350,height=400,scrollbars=yes,menubar=yes')">클릭</a>
이렇게 하시면 됩니다. 이때 중간에 "small"은 꼭 붙이시길..
-------------------------------------------------------------------------------------------
■ 기본 자바스크립트 링크 팝업
function popup(src,width,height) { window.open(src,'','width='+width+',height='+height+',scrollbars=1'); }
<a href="javascript:popup('주소명',500,500)">팝업</a>
'Web > javascript & jQuery' 카테고리의 다른 글
| [plugin] animate.css 와 더불어 편리하게 사용가능한 wow.js (0) | 2015.01.13 |
|---|---|
| substr을 사용하여 간단하게 글자수 자르기 (0) | 2015.01.09 |
| 모바일 접속 시 페이지 이동 (0) | 2014.11.04 |
| 랜덤으로 이미지 출력하기 (0) | 2014.10.10 |
| 정규식을 사용해 html 태그 제거하기 (0) | 2014.09.30 |
