카푸네집

개발을 하다 보니 팝업으로 이미지를 띄울 경우가 있죵..

근데 페이지 만들기 귀찮고, 파라미터 뭘 넘겨야 할지 고민되서

그냥 제가 페이지 안만들고 이미지 팝업 띄울수 있는 소스 만들어 봤습니다.

하지만 아직까지 베타는 커녕 걍 테스트 버전이니 저에게 뭐라고 하지 마세요~

단점은 몇개 있습니다.

1. 새로고침 할 경우 blank페이지로 간다. => 요건 페이지에 스크립트 추가해 넣으면 될거 같은데.. 새로고침 막는 스크립트 있잖아요~ 암튼 고거.
2. IE 7.0 (6.0은 아마도) 에서만 된다. => 뭐 호환성 테스트는 제가 무쟈게 귀차나 해서리~ ㅋㅋ

아래는 소스입니다.


 var OpenWindow;
 function BigImage()
 {
  OpenWindow = window.open("","_BigImage","width=10,height=10,top=0,left=0");
  var ImgObj = "<img id='BigImage' src='" + event.srcElement.src + "' onclick='self.close();'>"
  OpenWindow.document.title = "큰이미지 보기";
  OpenWindow.document.body.style.cursor = "hand";
  OpenWindow.document.body.innerHTML = ImgObj;
  setTimeout("SetPopup()",100);
 }

 function SetPopup()
 {
  var BigImageObjWidth = OpenWindow.document.getElementById("BigImage").width;
  var BigImageObjHeight = OpenWindow.document.getElementById("BigImage").height;

  var PCMaxHeight = screen.availHeight - 100;
  var PCMaxWidth = screen.availWidth - 100;

  if (BigImageObjWidth > PCMaxWidth){
   BigImageObjWidth = PCMaxWidth;
   OpenWindow.document.getElementById("BigImage").width = PCMaxWidth - 30;
  }
  else{
   BigImageObjWidth = eval( BigImageObjWidth + "+" + 30);
  }

  if (BigImageObjHeight > PCMaxHeight){
   BigImageObjHeight = PCMaxHeight;
   OpenWindow.document.getElementById("BigImage").height = PCMaxHeight - 90;
  }
  else{
   BigImageObjHeight = eval( BigImageObjHeight + "+" + 90);
  }

  OpenWindow.resizeTo(BigImageObjWidth, BigImageObjHeight);
  OpenWindow.focus();
  OpenWindow.resizeTo(BigImageObjWidth, BigImageObjHeight);
 }


이 아래는 예제 입니다 ~ 근데 이미지가 넘 작아서리~ ㅋㅋ

이올린에 북마크하기(0) 이올린에 추천하기(0)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

<script language='JavaScript　'>
    // Internet Explorer에서 셀렉트박스와 레이어가 겹칠시 레이어가 셀렉트 박스 뒤로 숨는 현상을 해결하는 함수
    // 레이어가 셀렉트 박스를 침범하면 셀렉트 박스를 hidden 시킴
    // 사용법 :
    // <div id=LayerID style="display:none; position:absolute;" onpropertychange="selectbox_hidden('LayerID')">
    function selectbox_hidden(layer_id)
    {
        var ly = eval　(layer_id);

        // 레이어 좌표
        var ly_left  = ly.offsetLeft;
        var ly_top    = ly.offsetTop;
        var ly_right  = ly.offsetLeft + ly.offsetWidth;
        var ly_bottom = ly.offsetTop + ly.offsetHeight;

        // 셀렉트박스의 좌표
        var el;

        for (i=0; i<document.forms.length; i++) {
            for (k=0; k<document.forms[i].length; k++) {
                el = document.forms[i].elements[k];   
                if (el.type == "select-one") {
                    var el_left = el_top = 0;
                    var obj = el;
                    if (obj.offsetParent) {
                        while (obj.offsetParent) {
                            el_left += obj.offsetLeft;
                            el_top  += obj.offsetTop;
                            obj = obj.offsetParent;
                        }
                    }
                    el_left  += el.clientLeft;
                    el_top    += el.clientTop;
                    el_right  = el_left + el.clientWidth;
                    el_bottom = el_top + el.clientHeight;

                    // 좌표를 따져 레이어가 셀렉트 박스를 침범했으면 셀렉트 박스를 hidden 시킴
                    if ( (el_left >= ly_left && el_top >= ly_top && el_left <= ly_right && el_top <= ly_bottom) ||
                        (el_right >= ly_left && el_right <= ly_right && el_top >= ly_top && el_top <= ly_bottom) ||
                        (el_left >= ly_left && el_bottom >= ly_top && el_right <= ly_right && el_bottom <= ly_bottom) ||
                        (el_left >= ly_left && el_left <= ly_right && el_bottom >= ly_top && el_bottom <= ly_bottom) )
                        el.style.visibility = 'hidden';
                }
            }
        }
    }

    // 감추어진 셀렉트 박스를 모두 보이게 함
    function selectbox_visible()
    {
        for (i=0; i<document.forms.length; i++) {
            for (k=0; k<document.forms[i].length; k++) {
                el = document.forms[i].elements[k];   
                if (el.type == "select-one" && el.style.visibility == 'hidden')
                    el.style.visibility = 'visible';
            }
        }
    }
<script language='JavaScript　'>

출처 : Tong - ♡우정♡님의 Web Programing통

출처 : http://kr.blog.yahoo.com/junetee97/143.html

이올린에 북마크하기(0) 이올린에 추천하기(0)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.