아이엠 !나이롱맨😎
article thumbnail
반응형

 

자바스크립트를 이용하여 팝업 창을 여는 방법에 대한 글입니다.

 


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입니다.

 

팝업창 호출 버튼을 클릭하게 되면 팝업이 나타납니다.

 

팝업창이 나타났습니다.

 

세번째 인자를 조정하여 팝업의 크기 또한 조절이 가능합니다.

 

 

 

읽어주셔서 감사합니다.

질문은 언제나 환영합니다.

 

"난 반드시 백엔드 왕이 될거야"

반응형

article prev thumbnail
article next thumbnail
profile on loading

Loading...