"skype-call-popup"
Bootstrap 4.1.1 Snippet by Guley

Post to Facebook Tweet this

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Skype Call Popup</title>
</head>
<body>
<div class="callwrapper">
<div class="main_cont">
<div class="left_side">
<div class="image_col"> <img src="https://www.flaticon.com/premium-icon/icons/svg/2589/2589026.svg"> </div>
<div class="name_col"> <h2>Ramu Kaka</h2> <h5>Incomimg Call</h5> </div>
</div>
<div class="right_side">
<button class="video_call"> <img src="https://image.flaticon.com/icons/svg/884/884451.svg" alt=""> </button>
<button class="audio_call"><img src="https://image.flaticon.com/icons/svg/830/830688.svg" alt=""></button>
<button class="cancel_call"><img src="https://image.flaticon.com/icons/svg/830/830606.svg" alt=""></button>
</div>
</div>
<div class="footer_cont">
Accept with video using CTRL+Alt+Page Up
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
*{
padding: 0;
margin: 0;
}
.callwrapper{
width: 450px;
margin: 0 auto;
font-family: Arial,
}
h1,h2,h3,h4,h5{
margin: 0;
}
.main_cont {
background-color: #00aff0;
border: 1px #0094cc solid;
border-radius: 3px 3px 0 0;
padding: 25px;
float: left;
width: 100%;
}
.left_side{
float: left;
}
.left_side div{
display: inline-block;
color: #fff;
font: 13px/18px Arial;
}
.left_side .image_col{
}
.left_side .image_col img{
border-radius: 50%;
width: 40px;
height: 40px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
function position() {
$( ".callwrapper" ).position({
of: $( ".callwrapper" ),
my: $( ".callwrapper" ).val() + " " + $( ".callwrapper" ).val(),
at: $( ".callwrapper" ).val() + " " + $( ".callwrapper" ).val(),
collision: $( ".callwrapper" ).val() + " " + $( ".callwrapper" ).val()
});
}
$( "#calldialog" ).draggable({
drag: position
});
position();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro BS3
animated sinin and signup panel. animated login and registeration page, popup,
Callouts - Call to Action
Call to action with dark background

Questions / Comments: