Illegal invocation Bootsrap error on Modal open

Question

When I am trying to open a modal in my webpage I get plugins.bootstrap.js:6 Uncaught TypeError: Illegal invocationץ The popup won't show up only the black bg screen becomes appeared. And I don't see the "mfp wrap" div inside my elements.

SemiColonWeb · Accepted Answer

Hello,

This appears to be an issue with JS Conflicts on the Page. The Bootstrap Modals do not use .mfp (Magnific Popup, which is a different Lightbox Plugin). In order to correctly determine what is causing this issue, please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on 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.

sabatsuk · Answer

Here is the page how it looks like after I try to open a modal.

sabatsuk · Answer

And here is my modal code

sabatsuk · Answer

Seems like it is something related to the mfp hide cause if I replace it with the standard fade class it works and won't print the console error. It won't work nicely though. Attached is the image of how it looks with the fade class instead.

sabatsuk · Answer

Hey, Thanks! Here is the live link http://www.homendi.co.il/ All you need to do is to go to the lower part and click on one of the small titles or the i icons. I add an image so that you will know where to click since it is not in English. Thanks again for the help.

Semicolon Web · Answer

Hello,

Thanks for the Update. This is due to the .modal DIV being placed inside a position:relative; DIV (specifically its parent .container DIV) which conflicts with its position. Simply moving it outside the .container DIV or remove the position:relative; property from the .container DIV will fix this issue.

Hope this Helps!

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