CSS와 JavaScript만으로 팝업 채팅 창 만드는 방법

CSS와 JavaScript만 사용하면 별도의 외부 라이브러리 없이도 간단한 팝업 채팅 창을 만들 수 있습니다. 이 글에서는 화면 우측 하단에 고정된 채팅 버튼을 클릭하면 채팅 창이 열리고, 닫기 버튼을 누르면 창이 사라지는 기능을 구현하는 전체 과정을 살펴봅니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .openChatBtn {
        background-color: rgb(123, 28, 179);
        color: white;
        padding: 16px 20px;
        border: none;
        font-weight: 500;
        font-size: 18px;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 23px;
        right: 28px;
        width: 280px;
    }
    .openChat {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #ff08086b;
        z-index: 9;
    }
    form {
        max-width: 300px;
        padding: 10px;
        background-color: white;
    }
    form textarea {
        width: 100%;
        font-size: 18px;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        font-weight: 500;
        background: #d5e7ff;
        color: rgb(0, 0, 0);
        resize: none;
        min-height: 200px;
    }
    form textarea:focus {
        background-color: rgb(219, 255, 252);
        outline: none;
    }
    form .btn {
        background-color: rgb(34, 197, 107);
        color: white;
        padding: 16px 20px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
    }
    form .close {
        background-color: red;
    }
    form .btn:hover, .openChatBtn:hover {
        opacity: 1;
    }
</style>
</head>
<body>
<h1>Popup Chat Window Example</h1>
<h2>Click the below button to start chatting</h2>
<button class="openChatBtn" onclick="openForm()">Chat</button>
<div class="openChat">
<form>
<h1>Chat</h1>
<label for="msg"><b>Message</b></label>
<textarea placeholder="Type message.." name="msg" required></textarea>
<button type="submit" class="btn">Send</button>
<button type="button" class="btn close" onclick="closeForm()">
Close
</button>
</form>
</div>
<script>
    document.querySelector(".openChatBtn").addEventListener("click", openForm);
    document.querySelector(".close").addEventListener("click", closeForm);
    function openForm() {
        document.querySelector(".openChat").style.display = "block";
    }
    function closeForm() {
        document.querySelector(".openChat").style.display = "none";
    }
</script>
</body>
</html>

코드 핵심 요소 설명

.openChatBtn — position: fixed로 화면 오른쪽 하단에 고정된 채팅 열기 버튼입니다.
.openChat — 기본적으로 display: none 상태로 숨겨져 있는 채팅 창 컨테이너입니다.
openForm() 함수 — 채팅 버튼을 클릭하면 채팅 창의 display 값을 block으로 변경하여 화면에 표시합니다.
closeForm() 함수 — 닫기 버튼을 클릭하면 display 값을 none으로 변경하여 채팅 창을 다시 숨깁니다.

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 출력됩니다.

CSS와 JavaScript만으로 팝업 채팅 창 만드는 방법

화면 하단의 Chat 버튼을 클릭하면 아래와 같이 팝업 형태의 채팅 창이 열립니다.

CSS와 JavaScript만으로 팝업 채팅 창 만드는 방법