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

Question

I am using the modal function of 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 (link), everything works => I see modal content.

However, when I use the Javascript method (instead of the link) to show the modality as follows:

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

I see the fading effect without displaying modality ...

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

When I started with a javascript image, EVEN, the link only shows the fading effect without modal.

Could this be .. an error from the modal Javascript method?

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

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

Answer 1

I am not sure that I misunderstood your question.

According to my understanding of your question, you need

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

you can't just

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

because there is no url in this js method.

Does this resolve your question?

Answer 2

What you need to do is remove the data target from the html tag when used with js, as a result of which it calls the function twice then one shows it and the other removes it. This is how I decided.

Answer 3

Readers should note that the "remote:" option is out of date ... in the docs

"This parameter has been deprecated since version v.3.3.0 and will be removed in version 4. We recommend that you use client-side templates or a data binding structure instead, or call jQuery.load yourself.

If a remote URL is provided, the content is loaded once using the jQuery download method and injected into div.modal-content. If you use data-api, you can alternatively use the href attribute to indicate the remote source. An example of this is shown below: "

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