Modal box

Hello,

You cannot add another instance of Magnific Lightbox inside an already active instance of the Magnific Lightbox. However, you can add the Magnific Lightbox gallery inside a Bootstrap Modal. Example:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-body">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
					<h4>Text in a modal</h4>
					<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

					<h4>Popover in a modal</h4>
					<p>This <a href="#" role="button" class="btn btn-secondary" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>

					<h4>Tooltips in a modal</h4>
					<p><a href="#" data-toggle="tooltip" title="" data-original-title="Tooltip">This link</a> and <a href="#" data-toggle="tooltip" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
					<hr>
					<h4>Overflowing text to show scroll behavior</h4>
					<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
					<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
					<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
					<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
					<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
					<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
					<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
					<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
					<p class="nobottommargin">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
					<div class="masonry-thumbs grid-5 clearfix" data-big="3" data-lightbox="gallery">
						<a href="images/portfolio/4/1.jpg" data-lightbox="gallery-item">
							<img src="images/portfolio/4/1.jpg" alt="Gallery Image">
							<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
						</a>
						<a href="images/portfolio/4/2.jpg" data-lightbox="gallery-item">
							<img src="images/portfolio/4/2.jpg" alt="Gallery Image">
							<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
						</a>
						<a href="images/portfolio/4/3.jpg" data-lightbox="gallery-item">
							<img src="images/portfolio/4/3.jpg" alt="Gallery Image">
							<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
						</a>
						<a href="images/portfolio/4/4.jpg" data-lightbox="gallery-item">
							<img src="images/portfolio/4/4.jpg" alt="Gallery Image">
							<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
						</a>
						<a href="images/portfolio/4/5.jpg" data-lightbox="gallery-item">
							<img src="images/portfolio/4/5.jpg" alt="Gallery Image">
							<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
						</a>
						<a href="images/portfolio/4/6.jpg" data-lightbox="gallery-item">
							<img src="images/portfolio/4/6.jpg" alt="Gallery Image">
							<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
						</a>
						<a href="images/portfolio/4/7.jpg" data-lightbox="gallery-item">
							<img src="images/portfolio/4/7.jpg" alt="Gallery Image">
							<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
						</a>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
</div>

Additionally, also use the following CSS Code:

.mfp-bg { z-index: 1998; }
.mfp-wrap { z-index: 1999; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

As already mentioned, you cannot add another instance of Magnific Lightbox inside an already active instance of the Magnific Lightbox. The above code show a Magnific Lightbox gallery from inside a Bootstrap Modal.

Can you please provide us with a Live URL so that we can check out the exact issue with the above code and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

We have checked out the above codes and it is working fine. The CSS Codes are used to overlay the Magnific Popup Gallery above the Bootstrap Modal.

Additionally, please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Add the following JS Code at the bottom of the Page:

<script>
	jQuery('#myModal').on('shown.bs.modal', function (e) {
		SEMICOLON.widget.masonryThumbs();
	});
</script>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.