Bootstrap 3 / showing modal doesn't work with the javascript way

Question

I use the Modal feature from Bootstrap 3.0.

I have this code:

<a data-toggle="modal" href="/myNestedContent" data-target="#myModal">
  Open the modal containing the content
</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
//nested content will be inserted here
</div>

When I click on the anchor (the link), the whole works => I see the modal with the content.

However, when I use the Javascript way (instead of the link) to show the modal like this:

$('#myModal').modal('show');

I only see the fade effect without the modal being shown...

When I started by clicking on the link, THEN calling the javascript, it works. (side effect?)

When I started by the javascript way, EVEN the link only shows the fade effect without the modal.

Might it be .. a bug from the modal Javascript method?

For information, the declarations of my scripts that I use are in the right order:

<script src="//code.jquery.com/jquery.js"></script>
<script src="javascripts/jquery.form.min.js"></script> 
<script src="javascripts/bootstrap.min.js"></script>

Not sure what's wrong but it works for me using the method you described - jsfiddle.net/kZyLu — David Spence
– David Spence, Commented Aug 25, 2013 at 1:40

Dollar Money Woof Woof · Accepted Answer · 2013-08-25 04:57:30Z

8

i am not sure if i have misunderstood your question.

According to my understanding of your question, you need

$('#myModal').modal({
    show: true,
    remote: '/myNestedContent'
});

you cannot just

$('#myModal').modal('show');

because there is no url provided in this js method.

does this solve your question?

answered Aug 25, 2013 at 4:57

Dollar Money Woof Woof

1,0585 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mik378 Over a year ago

I haven't tested yet that I did a +1 since it sounds pretty obvious. :). Indeed, currently, my remote path declaration is only present with the link way. Shame on me ? :) Thanks a lot !

globalSchmidt Over a year ago

Readers should note that the "remote:" option is being deprecated - see answer below

omar · Accepted Answer · 2014-09-27 04:45:49Z

0

What you need to do is remove the data-target from the html tag when used with js, leaving it call twice the function then one shows it and the other removes it. Thats how i solved.

answered Sep 27, 2014 at 4:45

omar

1

Comments

globalSchmidt · Accepted Answer · 2015-02-28 12:25:52Z

0

Readers should note that the "remote:" option is being deprecated... per the docs

"This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:"

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

answered Feb 28, 2015 at 12:25

globalSchmidt

1,33917 silver badges31 bronze badges

Collectives™ on Stack Overflow

Bootstrap 3 / showing modal doesn't work with the javascript way

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related