JAVA/HTML

팝업 HTML JavaScript 기록용

java나유 2023. 1. 1. 01:35

몇 개월전에 작업했던 주소 팝업 html 

기록용으로 저장해둔다.

 

html

  <dt>주소</dt>
                    <dd class="input_st3">
                        <input type="text" id="post" placeholder="우편번호" value="" readonly>
                        <span class="joinHome"></span>
                        <input type="button" value="주소 검색" onclick="addr();">
                    </dd>
                    <dd class="input_st1">
                        <input type="text" id="doro" maxlength="60" value="" placeholder="도로명주소" readonly>
                    </dd>
                    <dd class="input_st1">
                        <input type="text" id="detail" maxlength="60"placeholder="상세주소">
                    </dd>
                    <dd class="input_st1 refer">
                        <input type="text" placeholder="참고항목" disabled>
                    </dd>

popup.html

    <style>
        body{ margin: 0; padding: 0;}
        .p_css { width:500px; height:50px; text-align: center;
        font-size: 14px; font-weight: bold; margin: 0 auto;
        line-height: 50px;
        }
        .addlist { width:500px; height:400px; border:1px solid #ccc;
        position:relative; margin: 0 auto;
        }
        .ulcss { height: auto; list-style:none; margin:10px; padding:0}
        .ulcss>li{height: 40px; cursor: pointer;}
        .close_btn { width:80px; height:35px; 
        background-color: darkslategray; color: white; 
        font-size: 12px; border: 0;
        position: absolute; right: 20px; bottom: 20px;
        }
    </style>
</head>
<body>
    <section>
    <p class="p_css" id="p_css">도로명 주소 리스트</p>
    <div class="addlist" id="addlist">
    <ul class="ulcss" id="ulcss">
    <!-- 도로명 주소가 나오는 부분-->
    </ul>
    <input type="button" value="창닫기" class="close_btn" onclick="close_btn()" id="close_btn">
    </div>
    </section>
</body>

js

function addr(){
   window.open("./popup.html","","width=600 height=600");   
};


function close_btn(){
	self.close();
};
728x90
저작자표시 비영리 변경금지 (새창열림)