jQuery : blur modal popup 소스

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

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();

        });

    });

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

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

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

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

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

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