[JavaScript] 팝업창 띄우는 두 가지 방법

 

 

 

 

1. html 에서 바로 띄우기 

 

        <div id ="" class="side_menu_box side_menu_hover">
            <a class="side-a" style = "width:100px; height:50px; display:inline-block" href="javascript:openWindowPop('http://localhost:3000/user/chatBtn', 'popup');">채팅</a>
        </div>

html 해당 요소(a tag) 에 href 를 'javascript:openWindowPop('http://localhost:3000/', 'popup') 이렇게 쓰면 끝 ! 

그리고 아래 JS 에 팝업창 크기 조정하기

<script type = "text/javascript">
   function openWindowPop(url, name){
        var options = 'top=100, left=650, width=800, height=815, status=no, menubar=no, toolbar=no, resizable=no';
        window.open(url, name, options);
    }
</script>

 

 

 

 

2. js를 연결해서 클릭하면 함수 실행하여 window pop으로 띄우기 

 

let chatBtn = document.querySelector('#chatBtn');
chatBtn.addEventListener('click', chatFn);

function chatFn() {
    var chatWidth = 450;
    var chatHeight = 655;
    var chatLeft = 90;
    var chatTop = 100;
    // xPos = (document.body.offsetWidth) - w; // 오른쪽 정렬
    // xPos += window.screenLeft; // 듀얼 모니터일 때
    // var yPos = (document.body.offsetHeight/2) - (h/2);
    window.open('chat', 'a', `width = ${chatWidth}px, height = ${chatHeight}px,left = ${chatLeft}%,top = ${chatTop}`);
}

 

html과 연결된 js 에서 해당 요소를 변수에 넣고 변수를 클릭하면 실행할 함수 (chatFn) 설정하기 !