<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> <h3>Click button or image to see Linkedin profile in Modal (pop-up).</h3> <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"> Click here </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="" data-format="inline"></script> <a href="http://www.linkedin.com/in/marissamayer"> <img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_myprofile_160x33.png" width="160" height="33" border="0" alt="View Rob McCormack's profile on LinkedIn"> </a> <hr> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Marissa Mayer <small>Yahoo!, President & CEO</small></h4> </div> <div class="modal-body"> <!-- 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> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- #/myModal --> <p> <br><br> <a href="http://validator.w3.org/check?uri=http://bootsnipp.com/iframe/22Z0&ss=1"> <span class="glyphicon glyphicon-check green" style="color: #339900;"></span> HTML⁵</a> </p> </div> <!-- ./row--> </div> <!-- ./container-->

.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; }