1. 팝업창 띄우는 방법


<script type="text/javascript">

<!--

function popupOpen(){

var popUrl = "test.html"; //팝업창에 출력될 페이지 URL

var popOption = "width=370, height=360, resizable=no, scrollbars=no, status=no;";    //팝업창 옵션(optoin)

window.open(popUrl,"",popOption);

}

//-->

</script>


<a href="javascript:popupOpen();" > 열려라 팝업창! </a>





2. 팝업창 띄울때 옵션(option) 종류


yes나 no로 지정하면 됩니다.

toolbar = 상단 도구창 출력 여부 

menubar = 상단 메뉴 출력 여부

location = 메뉴아이콘 출력 여부

directories = 제목 표시줄 출력 여부

status = 하단의 상태바 출력 여부

scrollbars = 스크롤바 사용 여부

resizable = 팝업창의 사이즈 변경 가능 여부


사이즈 정의(픽셀 px)

width = 팝업창의 가로 길이 설정

height = 팝업창의 세로 길이 설정

top = 팝업창이 뜨는 위치(화면 위에서부터의 거리 지정)

left = 팝업창이 뜨는 위치(화면 왼쪽에서부터의 거리 지정)



실행화면

Posted by 준콩ol 준콩ol

댓글을 달아 주세요

  1. 2014.06.18 13:49  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2015.03.20 00:56  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. 김영 2015.04.06 17:58  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다. 팝업을 2개 만들고 싶은데 저기 스크립트에서 설정을 2개로 해줄수 있나요???

  4. 2016.03.15 12:22  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 준콩ol 준콩ol 2016.03.15 20:00 신고  댓글주소  수정/삭제

      네~그게 맞죠.
      굳이 한개의 function에서 관리를 하시려면 반복문으로 처리가 가능합니다.
      각 팝업창의 URL, 속성들을 어디에서 불러오는지에 따라 수정하시면 됩니다.
      아래는 배열에 각 속성이 저장되어 있다라고 가정하고..

      for(var i=0; i<3; i++){
      var urlStr = urlArr[i];
      var popupTarget = "target_"+ i;
      var optionsStr = ""
      optionsStr += width="+ widthArr[i];
      optionsStr += height="+ heightArr[i];
      등등
      window.open(urlStr, popupTarget, optionsStr);
      }

      이 방법 외에도 방법은 여러가지입니다.

  5. 이의민 2016.09.22 15:06  댓글주소  수정/삭제  댓글쓰기

    test html도 만들어야 하나요?? test html에 대해서 알려주세요 ㅠ.ㅠ

    • 준콩ol 준콩ol 2016.09.22 15:09 신고  댓글주소  수정/삭제

      본문 내용 중 1번의 스크립트 소스에 popupOpen()이라는 함수를 실행했을때 팝업창을 띄우는데 test.html은"팝업창 띄우기 성공"이라는 내용을 가진 팝업창 소스입니다.
      즉 popupOpen()라는 함수는 test.html을 팝업창으로 띄우도록 해주는 역할을 하는 것입니다.