jquery-modal icon indicating copy to clipboard operation
jquery-modal copied to clipboard

Incompatable with Bootstrap

Open James2k2 opened this issue 5 years ago • 5 comments

The plugin has an issue whereby the 'modal' class is incompatible with Bootstrap (bootstrap already has a class called modal). a simple rename to something like jq-modal fixes the issue for me. Also, the z-index of the overlay is too low. This should either be customisable as an option, or generally increased. I have fixed these through mods of my own, but for those wanting to just use the basic clean design will run into problems if they use bootstrap or any kind of multi-layered page design.

For those wanting a proper fix whilst maintaining the default style, I guess you could duplicate the default modal CSS and give it a different name, then use modalClass to specify the new name. The only reason I mention this is because Bootstrap is quite popular as a done deal type integration.

James2k2 avatar Jan 02 '21 22:01 James2k2

Yes, it is not compatible with bootstrap. I tried with [email protected]. I lost 5-6 hours to find that problem. I don't know how to achieve it. @James2k2 can you share your fixed version? Maybe you can pull request too.

mesuttascic avatar Feb 21 '21 21:02 mesuttascic

In the README, the author states "Naming conflict with Bootstrap: Bootstrap's modal uses the same $.modal namespace. If you want to use jquery-modal with Bootstrap, the simplest solution is to manually modify the name of this plugin."

Hope this guidance helps.

ChadHorn avatar Apr 30 '21 21:04 ChadHorn

Hey guys, thanks for all the tips. I am not a js expert so unsure where to make the change. Can I do a search for $.modal on the js file and replace that with $.jqmodal, will that fix this?

Thanks

sumandahal avatar Aug 22 '21 07:08 sumandahal

I would like to know 2 :)

Friends4U avatar Aug 29 '21 12:08 Friends4U

In the README, the author states "Naming conflict with Bootstrap: Bootstrap's modal uses the same $.modal namespace. If you want to use jquery-modal with Bootstrap, the simplest solution is to manually modify the name of this plugin."

Hope this guidance helps.

How?

Friends4U avatar Aug 31 '21 17:08 Friends4U