1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body {font-family: Arial, Helvetica, sans-serif;}
7* {box-sizing: border-box;}
8
9.open-button {
10 background-color: #555;
11 color: white;
12 padding: 16px 20px;
13 border: none;
14 cursor: pointer;
15 opacity: 0.8;
16 position: fixed;
17 bottom: 23px;
18 right: 28px;
19 width: 280px;
20}
21
22.chat-popup {
23 display: none;
24 position: fixed;
25 bottom: 0;
26 right: 15px;
27 border: 3px solid #f1f1f1;
28 z-index: 9;
29}
30
31.form-container {
32 max-width: 300px;
33 padding: 10px;
34 background-color: white;
35}
36
37.form-container textarea {
38 width: 100%;
39 padding: 15px;
40 margin: 5px 0 22px 0;
41 border: none;
42 background: #f1f1f1;
43 resize: none;
44 min-height: 200px;
45}
46
47.form-container textarea:focus {
48 background-color: #ddd;
49 outline: none;
50}
51
52.form-container .btn {
53 background-color: #4CAF50;
54 color: white;
55 padding: 16px 20px;
56 border: none;
57 cursor: pointer;
58 width: 100%;
59 margin-bottom:10px;
60 opacity: 0.8;
61}
62
63.form-container .cancel {
64 background-color: red;
65}
66
67.form-container .btn:hover, .open-button:hover {
68 opacity: 1;
69}
70</style>
71</head>
72<body>
73
74<h2>Popup Chat Window</h2>
75<p>Click on the button at the bottom of this page to open the chat form.</p>
76<p>Note that the button and the form is fixed - they will always be positioned to the bottom of the browser window.</p>
77
78<button class="open-button" onclick="openForm()">Chat</button>
79
80<div class="chat-popup" id="myForm">
81 <form action="/action_page.php" class="form-container">
82 <h1>Chat</h1>
83
84 <label for="msg"><b>Message</b></label>
85 <textarea placeholder="Type message.." name="msg" required></textarea>
86
87 <button type="submit" class="btn">Send</button>
88 <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
89 </form>
90</div>
91
92<script>
93function openForm() {
94 document.getElementById("myForm").style.display = "block";
95}
96function closeForm() {
97 document.getElementById("myForm").style.display = "none";
98}
99</script>
100</body>
101</html>