Question

我目前有一个运行Bootstrap 2的Rails 4应用程序（gem twitter-bootstrap-rails 2.2.8）。我成功地使用部分来实现弹出窗口，其中单击链接时显示地图。这是我的代码。

的application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

bootstrap.js.coffee

jQuery ->
  $(".popover-map").popover({ html : true })

_MAP

<div class="row-fluid">
  <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div>
  <div class="span4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div>
  <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div>
</div>

_map_marfa

<p align="center"><%= image_tag("map-marfa.jpg", alt: "#{t :map_marfa_head}") %></p>

_map_bigbend

<p align="center"><%= image_tag("map-bigbend.jpg", alt: "#{t :map_bigbend_head}") %></p>

当我点击链接下面的地图显示并停留在那里，直到该人再次点击链接关闭地图。我已将代码复制到我的新Rails 5 Bootstrap 3应用程序中。以下是Bootstrap 3的代码更改。

的application.js

//= require bootstrap-sprockets

bootstrap.js.coffee已重命名为bootstrap.coffee

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets

_MAP

<div class="row">
  <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div>
  <div class="col-md-4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div>
  <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div>
</div>

现在，当我点击任一链接时，地图会显示并立即消失，而不是一直停留，直到点击该链接。

Answer 1

我一直在关注这一点，并意识到在application.js我需要涡轮锁定。无论出于什么原因，它会弄乱我试图做的事情。我删除了//= require turbolinks，我的脚本再次运行。去图。

如何使用Bootstrap 3在Rails部分实现弹出窗口？

1 个答案: