显示引导定制模式

我有两个看法。第一个包含一个链接，点击后应显示第二个视图，这是我的自定义模式。这两个文件都位于名为学校的相同文件夹中。

代码

firstView.html

<html> 
    <head>Click the link</head> 
    <body> 
    <div> 
    <a data-toggle="modal" href="secondView.html" data-target="#secondView" >Additional Details</a> 
    </div> 
    </body> 
</html>

secondView.html

<!-- Modal --> 
<div id="secondView" class="modal hide fade" 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>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div>

</div>

手头问题

问题是，当我点击我的链接，它不显示任何东西。我检查了控制台，并没有显示任何错误。所以，我认为这与我连接这两个视图的方式有关，可能与href标记有关。

我会感谢您的帮助人。

来源

2013-03-24 Stranger

从http://twitter.github.com/bootstrap/javascript.html#modals：

如果提供了一个远程URL，内容将被经由jQuery的负载方法加载并注入.modal体。

所以，你会怎么做

firstView.html

<html> 
    <head>Click the link</head> 
    <body> 
    <div> 
    <a data-toggle="modal" href="secondView.html" data-target="#myModal" >Additional Details</a> 
    </div> 

    <!-- Modal --> 
    <div id="myModal" class="modal hide fade" 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"> 
     <!-- Here be modal content --> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </body> 
</html>

secondView.html

<p>One fine body…</p>

来源

2013-03-24 16:19:00

好吧，让我进行更改，然后我会告诉你知道它是否有效。 – Stranger 2013-03-24 16:34:36

我提出了所有更改，但无效。我三倍检查我的代码，一切似乎工作正常。 – Stranger 2013-03-24 16:42:52

我在上面的代码中添加了我的更改。 – Stranger 2013-03-24 16:48:46

显示引导定制模式

回答

相关问题