twitter-bootstrap 从其他 html 文件打开模态（引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23427371/
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
Open Modal (bootstrap) from other html-file
提问by User999999
I'm building a website using bootstrap. But i'm come to somewhat of an dead-end. i've created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.
我正在使用bootstrap. 但我有点走到了死胡同。我从给定的例子中创建了一个模态（见下文）。如您所见，这是直接从他们的网站上获取的模式。
<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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Nieuwe Taak toevoegen</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" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I open this dialog using a button.
我使用按钮打开此对话框。
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >
But i want to keep my modals in seperate aspx/html-files. How can i open these modals when they are kept inside different html/aspx - files?
但我想保持我的模态分开aspx/html-files。当它们保存在不同的内部时，如何打开这些模态html/aspx - files？
example:if the button is inside index.Htmlbut the modal is inside newTaskModal.html, how would i open the modal? (If both are inside index.html, then there are no problems)
例如：如果按钮在里面index.Html但模态在里面newTaskModal.html，我将如何打开模态？（如果两者都在 index.html 内，则没有问题）
Note:I don't/can't use HTML5 (company-standards)
注意：我不/不能使用 HTML5（公司标准）
采纳答案by Jeremy Danyow
if you're using jquery, you could download the page using an ajax call:
如果您使用的是 jquery，则可以使用 ajax 调用下载页面：
$.ajax({
url: 'newTaskModal.html',
dataType: 'text',
success: function(data) {
alert(data);
// todo: add the html to the dom...
}
});
If you're building a single page application you might want to check out a framework designed to solve this type of problem: durandal
如果您正在构建一个单页应用程序，您可能需要查看一个旨在解决此类问题的框架： durandal
回答by Droow
Can you use PHP? If so there is simple solution.
你会用PHP吗？如果是这样，有一个简单的解决方案。
Your index will be index.php and where you want to have your modal just place this code
您的索引将是 index.php 并且您希望将模态放置在此代码的位置
<?php include "newTaskModal.html"; ?>
回答by Austin Poole
Also you could if you are using JQuery to load your html page into into a matched element.
如果您使用 JQuery 将您的 html 页面加载到匹配的元素中，您也可以。
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
Go to http://api.jquery.com/load/for more info.
访问http://api.jquery.com/load/了解更多信息。
回答by Pradeep
STEP 1 Use below code for link:
步骤 1使用以下代码链接：
<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>
STEP 2 Use below code for modal window
STEP 2在模态窗口中使用以下代码
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model-sm">`enter code here
<div class="modal-content"> </div>
</div>
</div>
STEP 3 Create MyModal.html and place some text.
步骤 3 创建 MyModal.html 并放置一些文本。
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Modal Contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">OK</button>
</div>
Note: This may not work local html. works only on server!
注意：这可能不适用于本地 html。仅适用于服务器！
