bootstrap modal is not a function

Question

I'm using twitter bootstrap modal dialog. And it works fine while only opening it with

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a>

But when I try something like

$('#close_popup').click(function(){
    $('#rules').modal('toggle');    
});

I get a javascript error:

bootstrap modal is not a function

Moreover. As far a I understand link with .close must close the window and it doesn't. What do I do wrong?

Have you included the bootstrap-modal.js ? – redGREENblue Dec 21 '11 at 10:52 — redGREENblue, Dec 21 '11 at 10:52
sure I did otherwise popup wouldn't work at all – iururu Feb 18 '12 at 21:59 — iururu, Feb 18 '12 at 21:59

score 65 · Accepted Answer · edited Feb 06 '15 at 19:27

65

I don't know if you have figured out this issue or not being it was a couple months ago when you asked the question, but I came across the same problem and it had to do with a conflict with another plugin, so I will post the solution for future inquiries.

Here is an example of what I did to get around this issue.

function ShowImageInModal(path) {
    jQuery.noConflict();
    (function ($) {
        $('#modalImage').removeAttr("src").attr("src", path);
        $('#myModal').modal('show');
    }
    )(jQuery);
}

edited Feb 06 '15 at 19:27

Joey

1,349
14
26

answered Feb 23 '12 at 05:10

Etch

3,044
25
31

10

+1 on this. All I needed to add was *jQuery.noConflict()* before *$('#myModal').modal('show')* Thanks. – jim Apr 29 '12 at 22:00
can confirm with @conor; jQuery.noConflict() before the call to .modal('show') fixed the problem in both Chrome and Firefox and got rid of an ugly workaround – Shomari Dec 09 '13 at 22:41
@Etch Thanks alot, adding the JQuery.noConflict() before the line worked for me too. – Codious-JR Jul 10 '14 at 20:10
Hi i was having the same problem, and i added jQuery.noConflict() before call modal, but when i call a modal, the jquery autocomplete plugin doesn't work. – Jaime Jan 12 '17 at 13:48

score 12 · Answer 2 · answered Sep 13 '12 at 20:58

12

probably a namespace conflict, simply do this...

jQuery(document).ready(function($) {
    $('#myModal').modal('toggle');
});

answered Sep 13 '12 at 20:58

Deo Gaudette

121
1
2

score 2 · Answer 3 · answered Mar 18 '14 at 13:51

2

Make sure you are not loading multiple jquery files from multiple locations, local or remote.

answered Mar 18 '14 at 13:51

Vijay Kumar Kanta

1,111
1
15
25

score 2 · Answer 4 · answered Feb 26 '15 at 16:41

one of the most concise ways to avoid these conflicts is :

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
jQuery(function($){
// Your jQuery code here, using the $
});
</script>

as shown in :

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

score 1 · Answer 5 · edited Feb 06 '15 at 11:20

1

Add jQuery.noConflict() inside $(document).ready(function(){}) can be helping too.

$(document).ready(function(){
   jQuery.noConflict();
});

edited Feb 06 '15 at 11:20

Joey

1,349
14
26

answered Feb 06 '15 at 10:49

Rizki Andrianto

17
5

score 0 · Answer 6 · edited Feb 06 '15 at 19:17

I resolved this problem by removing the following code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Feed Selection</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <!--    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>    -->
                <button type="button" id="feedsave" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Which means bootbox somehow conflicts with the bootstrap modal popup.

score 0 · Answer 7 · answered Jul 05 '18 at 13:15

0

I didn't have bootstrap.js.min loaded in my head tag in the html.

I added the reference to the script and that resolved the issue.

answered Jul 05 '18 at 13:15

Neil Busse

139
8

score 0 · Answer 8 · answered Jan 02 '12 at 11:11

 $('#rules').modal('toggle');

Is 'rules' is the id of your modal?? because we can use .modal methods only with the div which has the 'modal' class.

and you given that

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a>

this is working fine and in this you have use 'my-modal' id for the modal.

bootstrap modal is not a function

8 Answers8

Linked