팝업창 위치 지정해서 띄워주기...그리고 기타....

작업을 하다보면..아주 가~끔 팝업창을 띄워줘야 할 경우가 생긴다...

 

이때 문제가..팝업창을 띄울때 그 페이지를 새로고침 하느냐? 아니면 그냥 새로고침없이 팝업창만 띄워주느냐? 하는 고민이 생긴다...여기에 덧붙여서 팝업이 뜨는 위치도 지정해주고 싶은데?...하는 욕심까지..

 

이런게 필요할 경우 맨날 잊어먹는 관계로 그냥 정리를 해놓으련다..

 

아래는 자바스크립트다.

일단 팝업창이 뜨는 위치는 스크린의 중앙에 위치하도록 해놓았다.

물론 위치값 역시 함수에서 변수로 받을 수도 있다. 지금은 변수로 받는 것이 페이지 주소와 이름, 높이 너비 뿐이지만..이것을..function MM_openBrWindow(theURL,winName,w,h,top,left)..로 수정해서 받을수도 있다.

이렇게 하면  var left = (screen.Width - w)/2 ; var top = (screen.Height - h)/2 ; 이녀석들을  빼주어야 할 것이다.

 

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,w,h) { //v2.0

 var left = (screen.Width - w)/2 ;
 var top = (screen.Height - h)/2 ;
   window.open(theURL,winName,'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width='+w+',height='+h+',top='+top+',left='+left);
}
//-->
</script>

 

아래부분은 본문에서 링크를 걸어주는 부분이다..

둘다 기본적으로 같은 내용이지만...하이퍼링크는 기본적으로 손가락표시가 나오지만 온클릭은 그것이 없다..

 

 style="cursor:hand;"를 이용하는 경우에도  에어리어를 이용하는 경우에는 또다른 함정이 있다.

즉 에어리어를 잡아주기 위한 원본이미지에서 커서를 해주면 맵에서 지정한 위치가 아닌 이미지 전체를 다 손가락이 가리키게 되는 것이다.

그렇다고 아래의 맵의 위치속에 style="cursor:hand;"를 넣을수도 없다. 왜냐하면 안먹기 때문이다..

 

결국 진리는 맵을 이용안하던가...아니면 사용할거라면 하이퍼링크를 이용하면 손가락이 잘나온다..

 

뭐 손가락 없이 링크를 걸겠다면 온클릭이든 하이퍼링크든 상관이 없다만.....ㅎ;; 

 

  <area shape="circle" coords="266,138,29" href="javascripｔ:MM_openBrWindow pop.htm','','width=313,height=374');" >

  <area shape="circle" coords="266,138,29" onclick="MM_openBrWindow pop.htm','','width=313,height=374');" >

 

그리고 팝업위치까지 설정해서 보내주려면 MM_openBrWindow pop.htm','','width=313,height=374'); 이부분을 MM_openBrWindow pop.htm','','width=313,height=374','왼쪽위치','상단위치');의 추가 값을 보내주면 된다.

 

물론 하이퍼링크를 이용하는 경우에는 javascripｔ:를 붙여주는 센스...함수를 이용하기 때문이다.

그게 아니더라도 코딩은 되도록 상세하고 정확하게 해주는게 옳다고 생각한다..

길게 쓰고 상세하게 쓰는게 귀찮더라도..그렇게 습관을 만들자...나부터....;;;;;;;;