티스토리 뷰

Language/HTML, CSS

HTML. Show popup in window center

out of coding 2020. 7. 31. 22:58

팝업창을 현재 보이는 브라우저의 정중앙에 노출하는 예제입니다.

<html>
<head>
    <meta charset="utf-8">
    <title>Popup Center Example</title>
    <script type="text/javascript">
        function open_popup() {
            let width = 500;
            let height = 600;
            let top = (window.innerHeight - height) / 2 + screenY;
            let left = (window.innerWidth - width) / 2 + screenX;

            let spec = 'status=no, menubar=no, toolbar=no, resizable=no';
            spec += ', width=' + width + ', height=' + height;
            spec += ', top=' + top + ', left=' + left;

            window.open('./popup.html', 'popup', spec);
        }
    </script>
</head>
<body>
<h1>
    This is WebPage!!!
</h1>
<input type='button' value='팝업이 열려요' onClick='open_popup()'/>
</body>
</html>

부분적으로 설명을 하자면

width가 500이고 height가 600인 팝업을 노출할 것이고요.

이것을 현재 window의 내부 height에서 팝업의 600을 빼고 screen의 Y를 더해줍니다.

왜냐면 현재 브라우저의 screenY값을 더해주어야지 창의 중앙에 오기 때문입니다.

같은 원리로 window의 내부 width에서 팝업의 500을 빼고 screen의 X를 더해줍니다.

spec 부분은 여러가지 설정을 표현하는 부분입니다.

 

참 쉽죠? ㅎㅎ 

저작자표시 비영리 변경금지

'Language > HTML, CSS' 카테고리의 다른 글

CSS. 가로세로 중앙정렬  (0) 2018.03.03
CSS. Basic Button Styling  (0) 2018.03.02
[CSS] <table border="0"> 사용시, Warning날때 CSS적용  (0) 2014.02.26
[CSS] HTML File에 CSS를 적용하는 방법들  (0) 2014.02.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함