Menu
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)
393
Bootstrap 5 Modal component. Responsive popup window with Bootstrap 5. Examples of with image, modal position i.e. center, z-index usage, modal fade animation, backdrop usage, modal size & more. Modal is a responsive popup used to display extra content.
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
The Bootstrap modal component allows you to add a stylized dialog box to your website. Add a stylized dialog box to your website with the Bootstrap modal component.
There are few ways to close modal in Bootstrap: click on a backdrop, close icon, or close button. You can also use JavaScript hide method. Click the button to launch the modal. Then click on the backdrop, close icon or close button to close the modal.
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>
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
