Bootstrap Snippet Linkedin profile with custom modal using HTML CSS

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<!-- Submitted to Feature  March 2, 2014  2:42pm  -->
<div class="container">
<div class="row">
<a href="http://bootsnipp.com/iframe/22Z0" class="btn btn-lg btn-success pull-right" target="_blank"><span class="glyphicon glyphicon-fullscreen"></span> Full screen</a>
    <h2>Linkedin profile with custom modal</h2>
    <p>
    Example of custom modal (color, size and animation with LinkedIn embed code. 
  </p> 
  
  <hr>
<p>Click button to see Linkedin profile in Modal.</p>
  <a href="" data-toggle="modal" data-target="#myModal" title="View my LinkedIn profile">
    <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/1/000/005/28a/1771ae7.jpg" alt="">
  </a>
<br><br>
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" title="View my LinkedIn profile">
  <img src="https://dlc1-s.licdn.com/sites/default/files/Logo-21px-TM.png" alt="">
</button>
<hr>
<h3>Same profile embedded on page</h3>
<!--  embed coe, just change id Name for your own profile -->
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/marissamayer"
data-format="inline"></script>
<hr>
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
.container{
padding: 30px;   
}
/*
Custom modal, you can remove all of these for default behavior
*/
.modal-content{
  background-color:#222;
  color:#ddd;
}
.modal-dialog {
  width: 400px;
  overflow: auto;
  background-color:#333;
}
/* custom animation */
.modal.fade {
  left: -50%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
       -o-transition: opacity 0.3s linear, left 0.3s ease-out;
          transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.fade.in {
  left: 100px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Linkedin profile with custom modal"
Bootstrap 3.1.0 Snippet by cyberwani

Related: See More

Questions / Comments:

"Linkedin profile with custom modal" Bootstrap 3.1.0 Snippet by cyberwani

Related: See More

Questions / Comments:

"Linkedin profile with custom modal"
Bootstrap 3.1.0 Snippet by cyberwani