1 | <html> |
2 | <head> |
3 | <title>Chat Popup Test</title> |
4 | <link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet'> |
5 | <style>@import url(https://fonts.googleapis.com/css?family=Oswald:400,300); |
6 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); |
7 | body |
8 | {
|
9 | font-family: 'Open Sans', sans-serif; |
10 | background-color: red; |
11 | } |
12 | .popup-box {
|
13 | background-color: #ffffff; |
14 | border: 1px solid #b0b0b0; |
15 | bottom: 0; |
16 | /*display: none;*/ |
17 | height: 415px; |
18 | position: fixed; |
19 | right: 70px; |
20 | width: 300px; |
21 | /*margin: auto;*/ |
22 | font-family: 'Open Sans', sans-serif; |
23 | } |
24 | .round.hollow {
|
25 | margin: 40px 0 0; |
26 | } |
27 | .round.hollow a {
|
28 | border: 2px solid #ff6701; |
29 | border-radius: 35px; |
30 | color: red; |
31 | color: #ff6701; |
32 | font-size: 23px; |
33 | padding: 10px 21px; |
34 | text-decoration: none; |
35 | font-family: 'Open Sans', sans-serif; |
36 | } |
37 | .round.hollow a:hover {
|
38 | border: 2px solid #000; |
39 | border-radius: 35px; |
40 | color: red; |
41 | color: #000; |
42 | font-size: 23px; |
43 | padding: 10px 21px; |
44 | text-decoration: none; |
45 | } |
46 | .popup-box-on {
|
47 | display: block !important; |
48 | } |
49 | .popup-box .popup-head {
|
50 | background-color: #fff; |
51 | clear: both; |
52 | color: #7b7b7b; |
53 | display: inline-table; |
54 | font-size: 21px; |
55 | padding: 7px 10px; |
56 | width: 100%; |
57 | font-family: Oswald; |
58 | } |
59 | .bg_none i {
|
60 | border: 1px solid #ff6701; |
61 | border-radius: 25px; |
62 | color: #ff6701; |
63 | font-size: 17px; |
64 | height: 33px; |
65 | line-height: 30px; |
66 | width: 33px; |
67 | } |
68 | .bg_none:hover i {
|
69 | border: 1px solid #000; |
70 | border-radius: 25px; |
71 | color: #000; |
72 | font-size: 17px; |
73 | height: 33px; |
74 | line-height: 30px; |
75 | width: 33px; |
76 | } |
77 | .bg_none {
|
78 | /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/ |
79 | background: #FADC00 none repeat scroll 0 0; |
80 | border: medium none; |
81 | } |
82 | .popup-box .popup-head .popup-head-right {
|
83 | margin: 11px 7px 0; |
84 | } |
85 | .popup-box .popup-messages {
|
86 | } |
87 | .popup-head-left img {
|
88 | border: 1px solid #7b7b7b; |
89 | border-radius: 50%; |
90 | width: 44px; |
91 | } |
92 | .popup-messages-footer > textarea {
|
93 | border-bottom: 1px solid #b2b2b2 !important; |
94 | height: 34px !important; |
95 | margin: 7px; |
96 | padding: 5px !important; |
97 | border: medium none; |
98 | width: 95% !important; |
99 | } |
100 | .popup-messages-footer {
|
101 | background: #fff none repeat scroll 0 0; |
102 | bottom: 0; |
103 | position: absolute; |
104 | width: 100%; |
105 | } |
106 | .popup-messages-footer .btn-footer {
|
107 | overflow: hidden; |
108 | padding: 2px 5px 10px 6px; |
109 | width: 100%; |
110 | } |
111 | .simple_round {
|
112 | background: #d1d1d1 none repeat scroll 0 0; |
113 | border-radius: 50%; |
114 | color: #4b4b4b !important; |
115 | height: 21px; |
116 | padding: 0 0 0 1px; |
117 | width: 21px; |
118 | } |
119 | |
120 | .popup-box .popup-messages {
|
121 | background: #FADC00 none repeat scroll 0 0; |
122 | /*background: #3f9684 none repeat scroll 0 0;*/ |
123 | height: 275px; |
124 | overflow: auto; |
125 | } |
126 | .direct-chat-messages {
|
127 | overflow: auto; |
128 | padding: 10px; |
129 | transform: translate(0px, 0px); |
130 | |
131 | } |
132 | .popup-messages .chat-box-single-line {
|
133 | border-bottom: 1px solid #a4c6b5; |
134 | height: 12px; |
135 | margin: 7px 0 20px; |
136 | position: relative; |
137 | text-align: center; |
138 | } |
139 | .popup-messages abbr.timestamp {
|
140 | background: #FADC00 none repeat scroll 0 0; |
141 | color: #fff; |
142 | padding: 0 11px; |
143 | } |
144 | |
145 | .popup-head-right .btn-group {
|
146 | display: inline-flex; |
147 | margin: 0 8px 0 0; |
148 | vertical-align: top !important; |
149 | } |
150 | .chat-header-button {
|
151 | background: transparent none repeat scroll 0 0; |
152 | border: 1px solid #636364; |
153 | border-radius: 50%; |
154 | font-size: 14px; |
155 | height: 30px; |
156 | width: 30px; |
157 | } |
158 | .popup-head-right .btn-group .dropdown-menu {
|
159 | border: medium none; |
160 | min-width: 122px; |
161 | padding: 0; |
162 | } |
163 | .popup-head-right .btn-group .dropdown-menu li a {
|
164 | font-size: 12px; |
165 | padding: 3px 10px; |
166 | color: #303030; |
167 | } |
168 | |
169 | .popup-messages abbr.timestamp {
|
170 | background: #FADC00 none repeat scroll 0 0; |
171 | color: #fff; |
172 | padding: 0 11px; |
173 | } |
174 | .popup-messages .chat-box-single-line {
|
175 | border-bottom: 1px solid #a4c6b5; |
176 | height: 12px; |
177 | margin: 7px 0 20px; |
178 | position: relative; |
179 | text-align: center; |
180 | } |
181 | .popup-messages .direct-chat-messages {
|
182 | height: auto; |
183 | } |
184 | .popup-messages .direct-chat-text {
|
185 | background: #dfece7 none repeat scroll 0 0; |
186 | border: 1px solid #dfece7; |
187 | border-radius: 2px; |
188 | color: #1f2121; |
189 | } |
190 | |
191 | .popup-messages .direct-chat-buttons {
|
192 | text-align: center; |
193 | background: #dfece7 none repeat scroll 0 0; |
194 | border: 1px solid #dfece7; |
195 | border-radius: 2px; |
196 | color: #1f2121; |
197 | } |
198 | |
199 | .popup-messages .direct-chat-timestamp {
|
200 | color: #fff; |
201 | opacity: 0.6; |
202 | } |
203 | |
204 | .popup-messages .direct-chat-name {
|
205 | font-size: 15px; |
206 | font-weight: 600; |
207 | margin: 0 0 0 49px !important; |
208 | color: #fff; |
209 | opacity: 0.9; |
210 | } |
211 | .popup-messages .direct-chat-info {
|
212 | display: block; |
213 | font-size: 12px; |
214 | margin-bottom: 0; |
215 | } |
216 | .popup-messages .big-round {
|
217 | margin: -9px 0 0 !important; |
218 | } |
219 | .popup-messages .direct-chat-img {
|
220 | border: 1px solid #fff; |
221 | background: #FADC00 none repeat scroll 0 0; |
222 | border-radius: 50%; |
223 | float: left; |
224 | height: 40px; |
225 | margin: -21px 0 0; |
226 | width: 40px; |
227 | } |
228 | .direct-chat-reply-name {
|
229 | color: #fff; |
230 | font-size: 15px; |
231 | margin: 0 0 0 10px; |
232 | opacity: 0.9; |
233 | } |
234 | |
235 | .direct-chat-img-reply-small |
236 | {
|
237 | border: 1px solid #fff; |
238 | border-radius: 50%; |
239 | float: left; |
240 | height: 20px; |
241 | margin: 0 8px; |
242 | width: 20px; |
243 | background: #FADC00; |
244 | } |
245 | |
246 | .popup-messages .direct-chat-msg {
|
247 | margin-bottom: 10px; |
248 | position: relative; |
249 | } |
250 | |
251 | .popup-messages .doted-border::after {
|
252 | background: transparent none repeat scroll 0 0 !important; |
253 | border-right: 2px dotted #fff !important; |
254 | bottom: 0; |
255 | content: ""; |
256 | left: 17px; |
257 | margin: 0; |
258 | position: absolute; |
259 | top: 0; |
260 | width: 2px; |
261 | display: inline; |
262 | z-index: -2; |
263 | } |
264 | |
265 | .popup-messages .direct-chat-msg::after {
|
266 | background: #fff none repeat scroll 0 0; |
267 | border-right: medium none; |
268 | bottom: 0; |
269 | content: ""; |
270 | left: 17px; |
271 | margin: 0; |
272 | position: absolute; |
273 | top: 0; |
274 | width: 2px; |
275 | display: inline; |
276 | z-index: -2; |
277 | } |
278 | |
279 | .direct-chat-text::after, .direct-chat-text::before, .direct-chat-buttons::after, .direct-chat-buttons::before {
|
280 | border-color: transparent #dfece7 transparent transparent; |
281 | |
282 | -moz-border-bottom-colors: none; |
283 | -moz-border-left-colors: none; |
284 | -moz-border-right-colors: none; |
285 | -moz-border-top-colors: none; |
286 | border-color: transparent #d2d6de transparent transparent; |
287 | border-image: none; |
288 | border-style: solid; |
289 | border-width: medium; |
290 | content: " "; |
291 | height: 0; |
292 | pointer-events: none; |
293 | position: absolute; |
294 | right: 100%; |
295 | top: 15px; |
296 | width: 0; |
297 | } |
298 | .direct-chat-text::after, .direct-chat-buttons::after {
|
299 | border-width: 5px; |
300 | margin-top: -5px; |
301 | } |
302 | .popup-messages .direct-chat-text, .popup-messages .direct-chat-buttons {
|
303 | background: #dfece7 none repeat scroll 0 0; |
304 | border: 1px solid #dfece7; |
305 | border-radius: 2px; |
306 | color: #1f2121; |
307 | } |
308 | .direct-chat-text, .direct-chat-buttons {
|
309 | background: #d2d6de none repeat scroll 0 0; |
310 | border: 1px solid #d2d6de; |
311 | border-radius: 5px; |
312 | color: #444; |
313 | margin: 5px 0 0 50px; |
314 | padding: 5px 10px; |
315 | position: relative; |
316 | } |
317 | </style> |
318 | <script type='text/javascript' src='//code.jquery.com/jquery-1.10.2.min.js'></script> |
319 | <script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script> |
320 | <script type='text/javascript'> $(function(){
|
321 | $("#addClass").click(function () {
|
322 | $('#qnimate').addClass('popup-box-on');
|
323 | }); |
324 | |
325 | $("#removeClass").click(function () {
|
326 | $('#qnimate').removeClass('popup-box-on');
|
327 | }); |
328 | })</script> |
329 | </head> |
330 | <body onLoad='$("#scrollme").scrollTop($("#scrollme")[0].scrollHeight);'>
|
331 | <!-- |
332 | <div class="container text-center"> |
333 | <div class="row"> |
334 | <div class="round hollow text-center"> |
335 | <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open chat </a> |
336 | </div> |
337 | </div> |
338 | </div> |
339 | --> |
340 | |
341 | <form> |
342 | |
343 | <div class="popup-box popup-box-on chat-popup" id="qnimate"> |
344 | <div class="popup-head"> |
345 | <a href="?message=CLEAR"><div class="popup-head-left pull-left"><img src="http://eyeocr.sourceforge.net/filestore/filestore.php?cmd=serve&file=blob_1008323&contentType=image/png" alt="Bot Image"> $HEADING</div></a> |
346 | <div class="popup-head-right pull-right"> |
347 | <!-- |
348 | <div class="btn-group"> |
349 | <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false"> |
350 | <i class="glyphicon glyphicon-cog"></i> </button> |
351 | <ul role="menu" class="dropdown-menu pull-right"> |
352 | <li><a href="#">Media</a></li> |
353 | <li><a href="#">Block</a></li> |
354 | <li><a href="#">Clear Chat</a></li> |
355 | <li><a href="#">Email Chat</a></li> |
356 | </ul> |
357 | </div> |
358 | |
359 | <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button> |
360 | --> |
361 | </div> |
362 | </div> |
363 | <div id="scrollme" class="popup-messages"> |
364 | |
365 | |
366 | |
367 | |
368 | <div class="direct-chat-messages"> |
369 | <!-- MSGS HERE --> |
370 | </div> |
371 | <div class="popup-messages-footer"> |
372 | <textarea autofocus id="status_message" placeholder="Type a message..." rows="10" cols="30" name="message" onkeydown="if (event.keyCode == 13) { form.submit(); return false; }"></textarea>
|
373 | <div class="btn-footer"> |
374 | <!-- |
375 | <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button> |
376 | <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button> |
377 | <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button> |
378 | --> |
379 | <!-- |
380 | <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button> |
381 | --> |
382 | </div> |
383 | </div> |
384 | </div> |
385 | |
386 | </form> |
387 | </body></html> |
Began life as a copy of #1008751
download render html show line numbers
Travelled to 13 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, jtubtzbbkimh, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1008785 |
| Snippet name: | Chat Popup Template With Buttons, bottom-right corner |
| Eternal ID of this version: | #1008785/10 |
| Text MD5: | 31dc103015f66b66448a56dbd7941581 |
| Author: | stefan |
| Category: | javax / web chat bots |
| Type: | HTML |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2017-06-06 07:29:06 |
| Source code size: | 10279 bytes / 387 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 386 / 246 |
| Version history: | 9 change(s) |
| Referenced in: | [show references] |