6

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)
cvrebert
  • 9,075
  • 2
  • 38
  • 49
vin
  • 61
  • 1
  • 1
  • 3
  • 1
    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? – Praveen Kumar Purushothaman Jul 22 '14 at 12:35
  • 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. – vin Jul 22 '14 at 12:57
  • But you are now stuck up with the whole thing na. – Praveen Kumar Purushothaman Jul 22 '14 at 13:16
  • "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... – serakfalcon Jul 22 '14 at 13:32

3 Answers3

6

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>
cvrebert
  • 9,075
  • 2
  • 38
  • 49
1

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.

Henri Hietala
  • 3,021
  • 1
  • 20
  • 27
  • how can I customize bootstrap only for Modal & CSS classes related to Modal only? – vin Jul 23 '14 at 15:43
  • 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 – Henri Hietala Jul 24 '14 at 06:19
0

This works:

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

and then

$('#yourdiv').bsModal();
jwhooper
  • 71
  • 1
  • 2