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:

Launch modal

	
		
			
				
					Modal Heading
					×
				
				
					Text in a modal
					
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

					Popover in a modal
					
This [button](#) should trigger a popover on click.

					Tooltips in a modal
					
[This link](#) and [that link](#) should have tooltips on hover.

					
					Overflowing text to show scroll behavior
					
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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

					
						[
							
![attachment](images/portfolio/4/1.jpg)

							
						](images/portfolio/4/1.jpg)
						[
							
![attachment](images/portfolio/4/2.jpg)

							
						](images/portfolio/4/2.jpg)
						[
							
![attachment](images/portfolio/4/3.jpg)

							
						](images/portfolio/4/3.jpg)
						[
							
![attachment](images/portfolio/4/4.jpg)

							
						](images/portfolio/4/4.jpg)
						[
							
![attachment](images/portfolio/4/5.jpg)

							
						](images/portfolio/4/5.jpg)
						[
							
![attachment](images/portfolio/4/6.jpg)

							
						](images/portfolio/4/6.jpg)
						[
							
![attachment](images/portfolio/4/7.jpg)

							
						](images/portfolio/4/7.jpg)
					
				
				
					Close
					Save changes
				
			
		
	

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:

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

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.