jQuery Bootstrap 3 / 显示模态不适用于 javascript 方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18423995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 / showing modal doesn't work with the javascript way
提问by Mik378
I use the Modalfeature from Bootstrap 3.0.
我使用Bootstrap 3.0 中的Modal功能。
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:
但是，当我使用 Javascript 方式（而不是链接）来显示这样的模式时：
$('#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?)
当我开始单击链接，然后调用 javascript 时，它起作用了。（副作用？）
When I started by the javascript way, EVEN the link only shows the fade effect without the modal.
当我通过 javascript 方式开始时，即使链接只显示淡入淡出效果而没有模态。
Might it be .. a bug from the modalJavascript method?
可能是 .. modalJavascript 方法的错误吗？
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>
回答by Tian Loon
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.
因为这个js方法没有提供url。
does this solve your question?
这能解决你的问题吗？
回答by omar
What you need to do is removethe data-targetfrom the html tagwhen used with js, leaving it call twice the function then one shows it and the other removes it. Thats how i solved.
你需要做的是删除的数据目标从HTML标签与JS使用时，离开它两次调用该函数，然后一个它的节目和其他删除。我就是这样解决的。
回答by globalSchmidt
Readers should note that the "remote:" option is being deprecated... per the docs
读者应该注意，“remote:”选项正在被弃用...... 根据文档
"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.
“此选项自 v3.3.0 起已弃用，并将在 v4 中删除。我们建议改用客户端模板或数据绑定框架，或自己调用 jQuery.load。
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:"
如果提供了远程 URL，内容将通过 jQuery 的 load 方法加载一次并注入 .modal-content div。如果您使用的是 data-api，您也可以使用 href 属性来指定远程源。一个例子如下所示："
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
