1

我正在为我的项目使用 twitter bootstrap 3，但在加载远程内容时似乎无法让模态正常工作。

我的“应用程序”布局如下：

<!DOCTYPE html>
<html>
<head>
  <title>TestBootstrap</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

我有两个视图，一个是索引，另一个是显示

索引包含以下信息：

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/modal/show">
    <div class="modal-dialog">
      <div class="modal-content">

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

显示包含以下内容：

<div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Find me in app/views/modal/show.html.erb</p>
        </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>

出于某种奇怪的原因，我在添加“远程数据”属性时显示没有背景的模式。

在此处输入图像描述 我曾尝试删除“turbo_links”，但它是徒劳的。不过，这似乎只发生在 Rails 中，因为我在 jsfiddle 中尝试了一个类似的示例，并且效果很好！请参阅http://jsfiddle.net/6X2zb/

请提前帮助和感谢！

4

2 回答 2

1

我终于能够从带有远程 Modal的 Bootstrap 3 中找出问题所在

原来我错过了周围的环境

<div class="modal-dialog">
  <div class="modal-content">

   ... contents ...

  </div>
</div>
于 2013-09-11T01:57:37.373 回答
1

我昨天刚撞到这堵墙。我最终使用了 bootstrap-modal，它为 bootstrap 3 提供了一个补丁。

https://github.com/jschr/bootstrap-modal

Bootstrap 3 具体示例：

http://jschr.github.io/bootstrap-modal/bs3.html

这是导轨示例

https://github.com/jschr/bootstrap-modal/wiki/Ruby-on-Rails----AJAX-Modal-Example

于 2013-09-05T04:19:10.933 回答