Window.open('url','name','option')
window.open('url','name','option')url
새창(팝업창)에 보여질 주소
name
새창 속성 또는 새창 이름 지정
_blank: 새창으로 연다(기본값)
_parent: 부모 프레임 열린다
_self : 현재 페이지에서 팝업 열린다
_top : 현재 페이지에서 최상의 페이지에서 팝업이 열린다
option
- 사이즈 정의
- width : 새 창 가로 길이
- height : 새 창 세로 길이
- top : 화면 위에서 팝업 위치 지정
- left: 화면 왼쪽에서 부터 팝업 위치 지정
예시
window.open("popUp.html","popUp","width=650, height=480, left=100, top=50"); window.open("PalDDack/AddrAdd.do", "배송지입력", "width=650, height=480, left=100, top=50");opener(팝업창에서 부모창 값 보내기)
opener.document.querySelector('.orderName').value=selForm.orderName.value;원본
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parnet</title>
<script>
function fn_pop(){
window.open("popUp.html","popUp","width=650, height=480, left=100, top=50");
}
</script>
</head>
<body>
<form action="">
<label for="orderName">이름</label>
<input type="text" id="orderName" class="orderName" name="orderName" placeholder="이름입력" value=""><br>
<label for="orderTel">휴대폰</label>
<input type="text" id="orderTel" name="orderTel" placeholder="휴대폰 입력" value=""><br>
<label for="orderAdd">배송주소</label>
<input type="text" id="orderAdd" name="orderAdd" placeholder="주소입력"value=""><br>
<label for="orderReq">배송메모</label>
<input type="text" id="orderReq" name="orderReq" placeholder="배송메모입력" value=""><br>
<button type="button" onclick="fn_click(this)">선택</button>
<button type="button" onclick="">삭제버튼</button>
</form>
<button onclick="fn_pop()">팝업열기</button>
</body>
</html>popUp.html ⇒jsp 사용함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.newInfo{
display: none;
}
</style>
<title>popUp</title>
</head>
<body>
<button onclick="f_add()">+신규 배송지 입력하기</button>
<div class="newInfo">
<form action="#" method="post">
<label for="orderName">이름</label>
<input type="text" id="orderName" name="orderName" placeholder="이름입력"><br>
<label for="orderTel">휴대폰</label>
<input type="text" id="orderTel" name="orderTel" placeholder="휴대폰 입력"><br>
<label for="orderAdd">배송주소</label>
<input type="text" id="orderAdd" name="orderAdd" placeholder="주소입력"><br>
<label for="orderReq">배송메모</label>
<input type="text" id="orderReq" name="orderReq" placeholder="배송메모입력"><br>
<button type="submit">완료</button>
<button type="button" onclick="f_clo()">X</button>
</form>
</div>
<!--입력된 정보 -->
//for문 넣음
<div class="oldInfo">
<form action="">
<label for="orderName">이름</label>
<input type="text" id="orderName" class="orderName" name="orderName" placeholder="이름입력" value="아무개"><br>
<label for="orderTel">휴대폰</label>
<input type="text" id="orderTel" name="orderTel" placeholder="휴대폰 입력" value="1234"><br>
<label for="orderAdd">배송주소</label>
<input type="text" id="orderAdd" name="orderAdd" placeholder="주소입력"value="어쩌구"><br>
<label for="orderReq">배송메모</label>
<input type="text" id="orderReq" name="orderReq" placeholder="배송메모입력" value="저쩌구"><br>
<button type="button" onclick="fn_click(this)">선택</button>
<button type="button" onclick="">삭제버튼</button>
</form>
//for문 끝
</div>
<script>
const newInfo = document.querySelector(".newInfo");
const orderName = document.querySelectorAll(".orderName");
function fn_click(pThis){
//form 태그인경우 사용가능 form 아니면 value 안나옴
console.log(pThis.parentElement.parentElement);//oldInfo
console.log(pThis.parentElement);//form
let selForm = pThis.parentElement;
console.log(pThis.parentElement.orderName.value);//value 나옴
// console.log(pThis.parentElement.orderTel.value);//value 나옴 //name이든 id든 상관없는듯
//부모창으로 값 전송
opener.document.querySelector('.orderName').value=selForm.orderName.value;
}
function f_add(){
newInfo.style.display="block";
}
function f_clo(){
newInfo.style.display="none";
}
</script>
</body>
</html>
.cloneNode(); ⇒ 요소 복제
원하는노드.cloneNode(true);<div id="sample" style="display: none">
<form action="#"><!-- form 기본 method="get" -->
이름 <input type="text" name="" value=""><br>
나이 <input type="text" name="" value=""><br>
별명 <input type="text" name="" value=""><br>
<button type="button" onclick="f_comp()">완료</button>
<button>Submit</button>
</form>
</div>
<script>
const sample = document.querySelector('#sample');
function f_comp(){
let newSample = sample.cloneNode(true); //
}
</script>.removeChild(); ⇒ 요소 제거
- 부모에서 포함된 자식 노드가 존재할 경우 일치하는 Id(#) 또는 Class(.) 등 과 같은 속성을 통해 자식 노드 제거
newSample.querySelector("form").removeChild(newSample.querySelector("button"));⇒ 복제한 노드에 form안에 button 제거
.appendChild(노드);
- 선택한 요소 안에 자식 요소 추가
<body>
<!-- 테블릿 만드릭 -->
<div id="sample" style="display: none">
<form action="#"><!-- form 기본 method="get" -->
이름 <input type="text" name="" value=""><br>
나이 <input type="text" name="" value=""><br>
별명 <input type="text" name="" value=""><br>
<button type="button" onclick="f_comp()">완료</button>
<button>Submit</button>
</form>
</div>
<button onclick="f_add()">+추가</button>
<div id="disp">
조회칸
</div>
<script>
const disp = document.querySelector('#disp');
const sample = document.querySelector('#sample');
function f_comp(){
let newSample = sample.cloneNode(true); //
newSample.querySelector("form").removeChild(newSample.querySelector("button"));
disp.appendChild(newSample);
}
</script>⇒'조회칸' 아래 복제된 sample 추가된다(중복없이)
원본
parent.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="f_open()">열기</button>
<script>
function f_open(){
window.open("기초popup.html","pop","width=300,height=300");
}
</script>
</body>
</html>popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 테블릿 만드릭 -->
<div id="sample" style="display: none">
<form action="#" id="infoForm"><!-- form 기본 method="get" -->
이름 <input type="text" name="" value=""><br>
나이 <input type="text" name="" value=""><br>
별명 <input type="text" name="" value=""><br>
<button type="button" onclick="f_comp()">완료</button>
<button>Submit</button>
</form>
</div>
<button onclick="f_add()">+추가</button>
<div id="disp">
조회칸
</div>
<script>
const disp = document.querySelector('#disp');
const sample = document.querySelector('#sample');
function f_comp(){
let newSample = sample.cloneNode(true); //
newSample.querySelector("form").removeChild(newSample.querySelector("button"));
disp.appendChild(newSample);
disp.appendChild(document.createElement("hr"));
sample.style.display="none";
document.querySelector('#infoForm').reset(); //form 값 초기화
}
function f_add(){
sample.style.display="block";
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 배열 자르기 - slice([begin(,end)]) (0) | 2024.05.10 |
|---|---|
| serialize(),serializeArray() (0) | 2024.05.04 |
| JS 이용한 up&down 게임 (0) | 2024.04.10 |
| JS 이용한 전화기 만들기 (0) | 2024.04.10 |
| JS 이용한 가위바위보 (1) | 2024.04.10 |
