conflict between SimpleModal and Bootstrap modal

Question

I Have both these plugins included in same page which is causing conflict in-between them.

I removed the Bootstrap.min.js and SimpleModal worked fine. I removed jquery.simplemodal.js and Bootstrap modal worked fine. I Tried to invoke bootstrap modal which worked if the jquery.simplemodal.js is included before bootstrap.min.js

I am getting this error on Firebug console if SimpleModal included after Bootstrap

i.modal(...).one is not a function **..blah blah..** bootstrap.min.js (line 6)

Burrell

Why not use only one modal? If your full website is supported by Bootstrap, why not use Bootstrap model itself, as it is good with other components too right? – Grandmotherly

I have a place in my application where if I include the Bootstrap files my whole page's UI gets disturbed, So I included SimpleModal for on that place, resulted me to add this modal on this page as well. – Burrell

But you are now stuck up with the whole thing na. – Grandmotherly

"I have a place in my application where if I include the Bootstrap files my whole page's UI gets disturbed" -- sounds like you need to rework that code... – Amphibian

Answer 1

Use the noConflict feature of Bootstrap's JS plugins, e.g.:

<script src="bootstrap.min.js"></script>
<script>
  var bsModal = $.fn.modal.noConflict();
</script>
<script src="SimpleModal.js"></script>

Tullus

Its showing the same error I have mentioned in this question :( – Burrell

@Burrell Are you using Bootstrap v3.2.0? – Tullus

Its showing error in v3.3.7 as well. What is the alternate solution? – Giuditta

Answer 2

You can customize the js provided by Bootstrap in here: http://getbootstrap.com/customize/. Untick "Modals" in JavaScript Components section and you should be good to go with SimpleModal without conflicts with Bootstrap modal.

Novelia

how can I customize bootstrap only for Modal & CSS classes related to Modal only? – Burrell

1. Click 'Toggle' on Less files section (it will unselect everything) 2. Select 'Modals' in Less files -> JavaScript components 3. Click 'Toggle' on jQuery plugins section (it will unselect everything) 4. Select 'Modals' in jQuery plugins -> linked to components 5. Hit Compile and Download at the bottom of the page – Novelia

Answer 3

This works:

<script src="bootstrap.min.js"></script>    
<script>
    $.fn.bsModal = $.fn.modal.noConflict();
</script>
<script src="SimpleModal.js"></script>

and then

$('#yourdiv').bsModal();

Intendance