引导程序的远程模式对话框不工作

我在使用来自Twitter引导API的远程模式对话框时遇到问题。引导程序的远程模式对话框不工作

我想加载一个模式对话框的内容从远程html页面。我有两个页面，一个包含按钮（modal-remote.html），另一个包含我希望在单击按钮时显示的内容（modal-target.html）。

模式，remote.html：

<!DOCTYPE html> 
<html lang="en"> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal"> 
    Launch demo modal</a> 

</html>

这里是我的目标（或远程）页面

模式，target.html上代码：

<html> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Modal header</h3> 
     </div> 
     <div class="modal-body"> 
     <p>The quick brown fox jumps over the lazy dog. </p> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary" id="save_btn">Save changes</button> 
     </div> 
    </div> 
</html>

他们在同一个目录中。当我点击按钮时，没有任何反应。有人知道我做错了什么？非远程模式对话框工作得很好，我只是不知道如何使用远程功能。

来源

2012-10-19 Blake

您应该仔细阅读modal documentation。

如果提供了一个远程URL，内容将通过jQuery的load方法加载和注入.modal体

你的文件应该更像是：

modal-remote.html：

<!DOCTYPE html> 
<html lang="en"> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal"> 
    Launch demo modal</a> 

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Modal header</h3> 
     </div> 
     <div class="modal-body"> 
     <!-- content will be loaded here --> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary" id="save_btn">Save changes</button> 
     </div> 
    </div> 
</html>

modal-target.htm L：

<p>The quick brown fox jumps over the lazy dog. </p>

来源

2012-10-20 09:17:24 Sherbrow

的作品。谢谢！ – Blake

现在请注意，使用bootstrap3时，内容将被注入**模态元素**的根目录。请参阅http://stackoverflow.com/a/18387625/553073和[文档]（http://getbootstrap.com/javascript/#modals） – lastr2d2

从引导V3.30开始，远程选项已被弃用。见Here。

因此推荐使用远程内容的方法是使用jquery.load()方法。

例子：

$("modal").load("remote_content.html");

来源

2015-01-06 07:41:59 Chvoirre00

引导程序的远程模式对话框不工作

回答

相关问题