Question

我正在为我的项目使用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>

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

索引包含以下信息：

<!-- 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>

由于某些奇怪的原因，我在添加“remote-data”属性时显示没有背景的模态。

enter image description here 我试过删除“turbo_links”，但它是徒劳的。这似乎只发生在rails中，因为我在jsfiddle中尝试了类似的例子，它工作正常！请参阅http://jsfiddle.net/6X2zb/

请提前帮助和谢谢！

Answer 1

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

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

Bootstrap 3具体示例：

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

这是rails示例

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

Answer 2

我终于能够从Bootstrap 3 with remote Modal

中找出问题所在

原来我错过了周围的

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

   ... contents ...

  </div>
</div>

Bootstrap 3模式不适用于Rails 4

2 个答案: