Question

我无法想出更好的头衔，抱歉！

我的Rails 4应用程序的主页是一个图像网格，在点击时打开一个模态，当我第一次加载网站时一切正常。如果转到配置文件页面，然后按导航栏上的主页按钮或我的配置文件上的“返回主页”，模式不再出现，单击缩略图只需将“＃”添加到URL，而不会发生任何事情。

这两个链接唯一的共同点是它们都是'link_to root_path'，但我看不出它会如何破坏模态。

我的引导宝石：

gem 'bootstrap-sass'  
gem 'font-awesome-rails'

这是我的模态部分（我也尝试过我的索引中的代码而没有渲染部分但相同的问题）

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" style="width:40%; min-width: 300px">
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3 class="modal-title">Heading</h3>
    </div>
    <div class="modal-body" style="padding-left: 20px;">
        <div class="modal-image" style="float: left;" >
        </div>

        <div class="modal-infos" style="padding-left: 10px;float: left;">
        </div>  

        <div style="clear:both"></div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>

这是我的js函数

$(function() {
    $('.pop').click(function(){
    $('.modal-image').empty();
    $('.modal-infos').empty();
    var title = $(this).attr("title");
    var price = $(this).attr("price");
    var location = $(this).attr("location");
    var heading = [title, " (", price, "€)"].join('')
    $('.modal-title').html(heading);
    $($(this).parents('div').html()).appendTo('.modal-image');
    var infos = ["<li>Location: ", location, "</li><br><li>Price: ",price,"€</li><br><br>"].join('')
    $(infos).appendTo('.modal-infos');
    $('#myModal').modal({show:true});
    });
});

Answer 1

感谢eugen通过提及turbolinks的jQuery问题让我走上正轨。为了解决这个问题，我在assets / javascripts / dealsmodal.js中声明了一个“ready”变量，将它设置为我的脚本，然后调用.on（'page：load'，ready），如下所示：

var ready;
ready = function dealsmodal(){
    $("body").on("click", '.pop', function(){

    ... function goes here

};

$(document).ready(ready);
$(document).on('page:load', ready);

如果由于某种原因您不想这样做，您可以通过删除//= require turbolinks来禁用assets / javascripts / application.js中的turbolink。

Answer 2

使用公开方法show打开modal。

$(function() {
$('.pop').click(function(){
. . . . . 
$('#myModal').modal("show");
});

}）;

Answer 3

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

尝试这个

从内部链接进入页面时，Bootstrap模式不会打开

3 个答案: