Social-network style lightbox
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<div class="modal img-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-8 modal-image">
<img class="img-responsive " src="http://www.made-in-italy.com/files/imagecache/lg/pictures/travel-to-italy/news/2013/02/george-clooney-omega-testimonial-1.jpg">
<img class="img-responsive hidden" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" />
<img class="img-responsive hidden" src="http://www.netflights.com/media/216535/hong%20kong_03_681x298.jpg" />
<a href="" class="img-modal-btn left"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="" class="img-modal-btn right"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="col-md-4 modal-meta">
<div class="modal-meta-top">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div class="img-poster clearfix">
<a href=""><img class="img-circle" src="https://s-media-cache-ak0.pinimg.com/736x/3b/7d/6f/3b7d6f60e2d450b899c322266fc6edfd.jpg"/></a>
<strong><a href="">John Doe</a></strong>
<span>12 minutes ago</span>
</div>
<ul class="img-comment-list">
<li>
<div class="comment-img">
<img src="http://lorempixel.com/50/50/people/6">
</div>
<div class="comment-text">
<strong><a href="">Jane Doe</a></strong>
<p>Hello this is a test comment.</p> <span class="date sub-text">on December 5th, 2016</span>
</div>
</li>
<li>
<div class="comment-img">
<img src="http://lorempixel.com/50/50/people/7">
</div>
<div class="comment-text">
<strong><a href="">Jane Doe</a></strong>
<p>Hello this is a test comment and this comment is particularly very long and it goes on and on and on.</p> <span>on December 5th, 2016</span>
</div>
</li>
<li>
<div class="comment-img">
<img src="http://lorempixel.com/50/50/people/9">
</div>
<div class="comment-text">
<strong><a href="">Jane Doe</a></strong>
<p class="">Hello this is a test comment.</p> <span class="date sub-text">on December 5th, 2016</span>
</div>
</li>
</ul>
</div>
<div class="modal-meta-bottom">
<input type="text" class="form-control" placeholder="Leave a commment.."/>
</div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<p class="text-center text-muted">Updated Dec. 5th 2016 with basic responsive styles</p>
/* CSS used here will be applied after bootstrap.css */
html, body { height: 100%;}
/* So that the modal is displayed in the preview.. You can probably remove this and the above rule */
.img-modal {
display: block;
}
.img-modal .modal-dialog {
/* An arbitrary minimum height. Feel free to modify this one as well */
min-height: 350px;
height: 80%;
}
.img-modal .modal-content, .img-modal .modal-body, .img-modal .row, .img-modal .modal-image {
height: 100%;
}
.modal-content {
border-radius: 0;
}
.modal-body {
padding-top: 0;
padding-bottom: 0;
}
.modal-image {
background: #000;
padding :0;
}
.modal-image img {
margin: 0 auto;
max-height: 100%;
max-width: 100%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.img-modal .img-modal-btn {
display: block;
position: absolute;
top: 0;
bottom: 0;
background: black;
opacity: 0;
font-size: 1.5em;
width: 45px;
color: #fff;
transition: opacity .2s ease-in;
}
.img-modal .modal-image:hover .img-modal-btn {
opacity: 0.4;
}
.img-modal .modal-image:hover .img-modal-btn:hover {
opacity: 0.75;
}
.img-modal .img-modal-btn.right {
right: 0;
}
.img-modal .img-modal-btn i {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
margin-top: -.75em;
}
.img-modal .modal-meta {
position: relative;
height: 100%;
}
.img-modal .modal-meta-top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 45px;
padding: 5px 10px;
overflow-y: auto;
}
.img-modal .modal-meta-top .img-poster img {
height: 70px;
width: 70px;
float: left;
margin-right: 15px;
}
.img-modal .modal-meta-top .img-poster strong {
display: block;
padding-top: 15px;
}
.img-modal .modal-meta-top .img-poster span {
display: block;
color: #aaa;
font-size:.9em;
}
.img-modal .modal-meta-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 5px;
border-top: solid 1px #ccc;
}
.img-modal .img-comment-list {
list-style: none;
padding: 0;
}
.img-modal .img-comment-list li {
margin:0;
margin-top:10px;
}
.img-modal .img-comment-list li > div {
display:table-cell;
}
.img-modal .img-comment-list img {
border-radius:50%;
width: 42px;
height: 42px;
margin-right: 10px;
margin-top: 20px;
}
.img-modal .img-comment-list p {
margin: 0;
}
.img-modal .img-comment-list span {
font-size: .8em;
color: #aaa;
}
@media only screen and (max-width : 992px) {
.modal-content {
border-radius: 0;
max-height: 100%;
overflow-y: auto;
}
.img-modal .modal-image {
height: calc(100% - 100px);
}
.img-modal .modal-meta {
height: auto;
}
.img-modal .modal-meta-top {
position: static;
padding-top: 15px;
}
.img-modal .modal-meta-bottom {
position: static;
margin: 0 -15px;
}
}
http://www.pimart.eu/wp-con… is a dead link btw, not a big deal, just so you know.,hi there is a function that I can close that window,hey, im beginner in bootstraphow to make this lightbox without modal ?,cross button is not working …,This is what I was looking for!! Thanks a ton mate :),how to make this popup,i just come here to read comments.,OK,We cannot see all comments and add a comment on a smartphone. We can’t scroll.,Rly Cool!! Thanks!Hey i miss the “username” in comments,Something like the current version look OK?,Hell yeah! Thanks :D,Any chance for a fully-responsive version like Instagram’s,It’s responsive isn’t it?,I’m two years late to the party.. I might update this snip one day, but if anyone else was wondering play around with something like,.modal-content { border-radius: 0; max-height: 100%; overflow-y: auto;},The author is texh

Loading...