반응형
자바스크립트를 이용하여 팝업 창을 여는 방법에 대한 글입니다.
l window.open() 함수
window.open() 함수를 이용하여 쉽게 팝업창을 사용할 수 있습니다.
window.open("팝업창으로 사용할 파일(경로포함) 또는 uri","지정할 팝업의 이름","크기와 위치");
l 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function showPopup(){
window.open("test.html","팝업 테스트","width=400, height=300, top=10, left=10");
}
</script>
</head>
<body>
<input type="button" value="팝업창 호출" onclick="showPopup();">
</body>
</html>
window.open("test.html","팝업 테스트","width=400, height=300, top=10, left=10");
popup.html를 위와 같이 해주었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>팝업창</h1>
</body>
</html>
호출할 팝업창의 html입니다.
세번째 인자를 조정하여 팝업의 크기 또한 조절이 가능합니다.
읽어주셔서 감사합니다.
질문은 언제나 환영합니다.
"난 반드시 백엔드 왕이 될거야"
반응형
'...' 카테고리의 다른 글
[Spring] 스프링 servlet-context로 jsp 경로 설정하기 (0) | 2021.01.14 |
---|---|
[Spring] log4j 이용하여 로그 출력하기 (0) | 2021.01.14 |
List cannot be resolved to a type 에러 (0) | 2021.01.12 |
Tomcat 8 / 요청 타겟에서 유효하지 않은 문자가 발견되었습니다. tomcat rfc 7230 rfc 3986 오류 (0) | 2021.01.12 |
[Spring] 메이븐과 STS를 사용하여 스프링 환경 구축 (0) | 2021.01.11 |