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