반응형

불투명하게 바탕을 깔고 그 위에 모달형태의 팝업창을 띄울때 요긴한 소스




STEP1. 파일명은 jquery-popup.js라 명명하고 소스 카피 페이스트 저장해둠

만약 불투명도를 90%에서 덜 불투명하게 즉 배경이 더 보이게 하고 싶다면 opacity = "0.9"; 부분을 0.1에 가깝게 조정하면 됨


function fnIframePopUp(s, w, h) {

    //레이어를감싸고있는div

    var ifrObj = document.createElement("div");

    with (ifrObj.style) {

        display = "none";

        position = "fixed";

        _position = "absolute";

        left = "0";

        top = "0";

        width = "100%";

        height = "100%";

        zIndex = "10000";

    }

    ifrObj.id = "iFrameWrapLayer";

    document.body.appendChild(ifrObj);


    //bg

    var obj = document.createElement("div");

    with (obj.style) {

        position = "absolute";

        left = 0;

        top = 0;

        width = "100%";

        height = "100%";

        backgroundColor = "#000";

        filter = "Alpha(Opacity=50)";

        opacity = "0.9";

    }

    obj.id = "iFrameBg";

    document.body.appendChild(obj);


    //실제layer

    $("#iFrameWrapLayer").append($("#iFrameBg").add($("<div id='iFrameMainLayer' style='position:absolute; top:50%; left:50%; background:#fff; padding:10px 10px 5px 10px; border:4px solid #ddd;'><iframe name='ifr' id='ifr' width='" + w + "' height='" + h + "' frameborder='0' src='" + s + "'></iframe></div>")));


    //레이어팝업위치조정

    $('#iFrameWrapLayer').fadeIn();

    var temp = $('#iFrameMainLayer');

    if (temp.outerHeight() < $(document).height()) temp.css('margin-top', '-' + temp.outerHeight() / 2 + 'px');

    else temp.css('top', '0px');

    if (temp.outerWidth() < $(document).width()) temp.css('margin-left', '-' + temp.outerWidth() / 2 + 'px');

    else temp.css('left', '0px');

}


// 팝업창에서 닫기 

// 팝업창에서 함수호출방법 : parent.fnCloseIframePopUp();  

function fnCloseIframePopUp() {

    $("#iFrameWrapLayer").remove();

}


//부모reload

// 팝업창에서함수호출방법 : parent.fnCloseIframePopUp(); 

function fnCloseIframePopUpReload() {    

    parent.location.reload();

}

STEP2. step1에서 저장한 js 파일 부모창에서 불러옴

<script type="text/javascript" src="jquery-popup.js"></script>


STEP3. 부모창에서 모달팝업 호출할 링크 작성 후 jQuery 작성(jquery-popup.js의 함수 호출)

<a href="#" class="open1" url="popup1.asp" width="500" height="754">1번 팝업 호출</a> 

<a href="#" class="open2" url="popup2.asp" width="500" height="776">2번 팝업 호출</a> 


<script>

    $(document).ready(function() {

        // 1, 2 링크 클릭

        $('.open1, .open2').click(function(e) {

            e.preventDefault();

            fnIframePopUp($(this).attr('url'), $(this).attr('width'), $(this).attr('height'));

        });

    });

    </script> 


STEP4. 호출된 모달팝업에서 배경과 모달팝업 닫기

<a href="#" id="closeModal">닫기</a>


    $(document).ready(function() {

        $('#closeModal').click(function(e) {

            parent.fnCloseIframePopUp();

        });

    });



이 글을 보고 있는 조선인에게 알림.

제발 좀 다른 맛집블로그도 아닌 기술 문서 블로그에 퍼가기 금지 설정 좀 하지 말자.

늬들은 어디서 복사해온 자료가 아닌 순수 본인 머리에서 나온 자료들로만 채워놓았냐?

세상 모든 웹사이트들을 돌아다녀봐라

조선처럼 긁어가지못하게 운영되는 기술 블로그가 있는지!

꽁꽁 붙들어 놓고 싶으면 차라리 비공개로 쓰던가

반응형
Posted by Hippalus
,