부족한 실력이지만 javascript보다 jquery 위주로 작업을 하다 보니

눈에 거슬려서 카카오 우편번호를 jquery로 변환해 봤습니다.

저와 비슷한 생각을 가지고 계신 분이 계시다면 참고 하시면 좋을것 같습니다.

 

<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="$('#layer').hide()" alt="닫기 버튼">
</div>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

 

<script>
$(function(){

    //우편번호 찾기     
    $("#btn_zip").on("click", function () {
        new daum.Postcode({
            oncomplete: function(data) {                 
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                } 
                $("#zip").val(data.zonecode);
                $("#add1").val(addr);
                $("#add2").focus(); 
                $("#layer").hide();
            },
            width : '100%',
            height : '100%',
            maxSuggestItems : 5
        }).embed($("#layer").get(0)); 
        $("#layer").show();
        initLayerPosition();
    });

});

function initLayerPosition(){
    var width = 300;
    var height = 400;
    var borderWidth = 5; 

     
    $("#layer").css("width", width + "px");
    $("#layer").css("height", height + "px");
    $("#layer").css("border", borderWidth + "px solid");
    $("#layer").css("left", ((($(window).width() || $(document).width()) - width)/2 - borderWidth) + "px");
    $("#layer").css("top", ((($(window).height() || $(document).height()) - height)/2 - borderWidth) + "px");

}
</script>