자바스크립트를 사용하는 방법중 비교적 사용빈도가 높은것이 window의 메소드인 popup을 이용해 팝업창을 만드는 것입니다.

그럼 먼저 window의 메소드인 popup의 사용법부터 보겠습니다.

window.open(strUrl,strWindowName,strWindowFeatures);

  strUrl : 읽어들일 url을 지정하는 곳입니다.

  strWindowName : 팝업의 이름을 지정하는 곳입니다.
    - 윈도우 또는 프레임 이름
    - _blank : 이름이 없는 새로운 윈도우를 연다.
    - _parent : 현재 문서의 parent 윈도우에 문서를 연다.
    - _self : 현재 문서에 새로운 문서를 연다.
    - _top : 원래 문서가 프레임에 있을 경우 최상위에 있는 프레임에 새로운 문서를 연다.

  strWindowFeatures
    - width : 팝업 윈도우의 넓이를 지정하는곳 입니다.
    - height : 팝업 윈도우의 높이를 지정하는곳 입니다,
    - top : 화면의 상단으로 부터의 팝업 윈도우의 위치를 지정하는곳 입니다.
    - left : 화면의 좌측으로 부터의 팝업 윈도우의 위치를 지정하는곳 입니다.
    - titlebar : 팝업윈도우의 제목 막대를 보일 것인가를 지정하는곳 입니다.
    - menubar : 메뉴막대를 보일것인가를 지정하는 곳입니다.
    - toolbar : 브라우저의 도구막대를 보일것인가를 지정하는 곳입니다.
    - location : locationbar를 보일 것인가를 지정하는 곳입니다.
    - status : 팝업윈도우에 상태바를 보일 것인가를 지정하는 곳입니다.
    - scrollbars : 팝업윈도우에 수직, 수평 스크롤 막대를 보일 것인가를 지정하는 곳입니다.
    - resizable : 팝업윈도우의 크기를 변경할 수 있는가를 지정하는 곳입니다.

사용자 삽입 이미지

window.open 메소드의 속성중 Features내용


접근성을 고려한 방법

<script type="text/javascript">
  function PopupOpen(strUrl,strWindowName,strWidth,strHeight) {
    var strWindowFeatures = "width="+strWidth+",height="+strHeight;
    var strWindowPopup = window.open(strUrl,strWindowName,strWindowFeatures);
  }
</script>

<a href="팝업으로 띄울 url" onclick="PopupOpen(this.href,'팝업의 이름',팝업의 넓이,팝업의 높이);return false;">링크 이름</a>

ex)
  <a href="http://cleanup.tistory.com/" onclick="PopupOpen(this.href,'cleanup',400,300);return false;">아스피린 세상</a>

신고
Posted by 아스피린

웹접근성은 우리모두를 네티즌으로 만드는 지름길이다. by 아스피린

공지사항

카테고리

분류 전체보기 (16)
일상의 만남 (2)
일상의 장소 (1)
웹표준/IT 뉴스 (7)
스터디 마크업 (2)
마크업 Tip (4)
촛불 (0)
Total : 98,912
Today : 1 Yesterday : 3