카카오 우편번호 jquery로 변환
부족한 실력이지만 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>