4

是否可以使用 Twitter 引导程序的模式组件加载页面片段？我想将一个页面加载到模式中，但我只想要它的一部分。例如，我希望页面上的表单没有环绕导航。在使用 jquery 工具覆盖和 jquery 的 .load 函数之前，我已经完成了这种类型的事情。但是模态的东西不允许传入这种类型的信息。

这是我正在使用的一些示例文本：

 <a tabindex="-1"
    href="metadata.html"
    id="metadata-link"
    data-target="#modal"
    data-toggle="modal">Metadata</a>

 <div id="modal" class="modal hide fade in" style="display:none;">
   <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
   <div class="modal-body"></div>
   <div class="model-footer">footer</div>
 </div>

 <script>
   $(document).ready(function() {
     $('#metadata-link').modal({show:false});
   });
 </script>

“metadata.html”页面是一个完整的 html 文档。此页面的内容按预期加载到“.modal-body”元素中。但是什么都没有显示...

如果我将“metadata.html”页面切换为仅包含“div”内容的页面，则会显示模式。

有谁知道为什么会发生这种情况？

4

3 回答 3

4

您可以手动执行此操作：

<script>
$(document).ready(function() {

     $('#metadata-link').click(function(){
       $.ajax(
       {
          url:'url-to-load-page',
          success: function(response){
            //do what ever you want here to extract the part you want
            $('#modal-div-content').html(adapted-response);
            $('#modal').modal('show');
          }
       });
     });
   });
 </script>
于 2012-10-17T11:47:12.840 回答
3

bootstrap 使用 jquery load 方法，该方法允许指定 URL 和片段选择器：

.load() 方法与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定字符串中第一个空格后面的部分是确定要加载的内容的 jQuery 选择器。

所以在我的情况下（添加音乐家）我可以使用这样的普通链接标签：

<a href="/musicians/new?editMode  .container form" class="btn pull-right newItem" data-toggle="modal" data-target="#newItemModal" ><i class="icon-plus-sign"></i> Add</a>

它从容器 div 中提取表单元素并将其显示在 newItemModal 模式中。这种方法允许我将模态重新用于其他项目

于 2013-02-18T21:07:49.843 回答
0

使用数据远程声明片段 ID 对我有用：

<a href="remote.html" data-remote="remote.html #fragment" data-toggle="modal" data-target="#modal">
于 2014-08-24T02:31:46.433 回答