"Whatsapp Chat Box POPUP (#simple #html #css #User #Profile #jquery #Social #contact #accordion #popup #chat #messages #jquery)"
Bootstrap 3.3.0 Snippet by extreme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container text-center">
<div class="row">
<h2 style="color: rgb(24, 157, 14);"><i aria-hidden="true" class="fa fa-whatsapp"></i> Whatsapp Chat Box POPUP</h2>
<h4 style="font-size: 14px; line-height: 22px;">#simple #html #css #User #Profile #jquery #Social #contact<br> #accordion #popup #chat #messages #jquery</h4>
<div class="round hollow text-center">
<a href="#" class="open-btn" id="addClass"><i class="fa fa-whatsapp" aria-hidden="true"></i> Click Here</a>
</div>
<hr>
MORE
<a target="_blank" href="http://bootsnipp.com/snippets/z4P39"> Creative User Profile </a>, <a target="_blank" href="http://bootsnipp.com/snippets/GXzyP">Open in chat (popup-box chat-popup)</a>
</div>
</div>
<aside id="sidebar_secondary" class="tabbed_sidebar ng-scope chat_sidebar">
<div class="popup-head">
<div class="popup-head-left pull-left"><a Design and Developmenta title="Gurdeep Osahan (Web Designer)" target="_blank" href="https://web.facebook.com/iamgurdeeposahan">
<img class="md-user-image" alt="Gurdeep Osahan (Web Designer)" title="Gurdeep Osahan (Web Designer)" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" title="Gurdeep Osahan (Web Designer)" alt="Gurdeep Osahan (Web Designer)">
<h1>Gurdeep Osahan</h1><small><br> <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Web Designer</small></a></div>
<div class="popup-head-right pull-right">
<button class="chat-header-button" type="button"><i class="glyphicon glyphicon-facetime-video"></i></button>
<button class="chat-header-button" type="button"><i class="glyphicon glyphicon-earphone"></i></button>
<div class="btn-group gurdeepoushan">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-paperclip"></i> </button>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Gallery</a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
font-family: 'Open Sans', sans-serif;
}
.chat_box .chat_message_wrapper ul.chat_message > li + li {
margin-top: 4px;
}
.popup-box-on {
display: block !important;
}
a:focus {
outline: none;
outline-offset: 0px;
}
.popup-head-left.pull-left h1 {
color: #fff;
float: left;
font-family: oswald;
font-size: 18px;
margin: 2px 0 0 5px;
}
.popup-head-left a small {
display: table;
font-size: 11px;
color: #fff;
line-height: 4px;
opacity: 0.5;
padding: 0 0 0 7px;
}
.chat-header-button {
background: transparent none repeat scroll 0 0;
border: 1px solid #fff;
border-radius: 7px;
font-size: 15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(function(){
$("#addClass").click(function () {
$('#sidebar_secondary').addClass('popup-box-on');
});
$("#removeClass").click(function () {
$('#sidebar_secondary').removeClass('popup-box-on');
});
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: