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>
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.
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:"
i am not sure if i have misunderstood your question.
According to my understanding of your question, you need
you cannot just
because there is no url provided in this js method.
does this solve your question?