Rails 4中的Bootstrap模式不会弹出

Question

我按照该示例编写了带有模式弹出的Rails应用程序。

Heroku Demo link

这是代码我有（相当几行）

index.html.erb 
<h1>Listing people</h1> 
<%= link_to 'Add Person Modal', new_test_path, 
{:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %> 
<div id="modal-window" class="modal hide fade in" role="dialog" 
aria-hidden="true" style="display: none; "></div> 

_new_test.html.erb 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h3 id="myModalLabel">Modal header</h3> 
</div> 
<div class="modal-body"> 
    **here comes whatever you want to show!** 
</div> 
<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
</div> 



people_controller.rb 
def new_test 
    respond_to do |format| 
    format.html 
    format.js 
    end 
end 

new_test.js.erb 
// $("modal-window").modal(); 
$("#modal-window").html("<%= escape_javascript(render 'people/new_test') %>"); 

任何帮助理解!!

Answer 1

作为替代方案，如果您需要在模态中具有不同内容的能力，我建议使用Bootbox.js代替;它随时生成模态标记，并可用作默认确认/提示/警报浏览器对话框的替代方案。使用生成的标记的优点是，您不必处理重置模式通常需要的模板。

下面是我最近的项目获得的样本：

HTML：

<a href="#" data-modal-href="remote.html" class="show-modal">Click me</a> 

的jQuery：

$(document).on('click', 'a.show-modal', function (e) { 
    e.preventDefault(); 

    var url = $(this).data('modal-href'); 

    $.get(url) 
     .fail(function() { 
      bootbox 
       .alert("<b>We're sorry.</b> The modal could not be loaded. Please wait a moment and then try again.", function() { 
       }) 
       .find('div.modal-dialog') 
       .addClass('modal-sm'); 
     }) 
     .done(function (response, status, jqxhr) { 
      bootbox.dialog({ 
       show: true, 
       title: 'Your Modal Title', 
       message: response, 
       buttons: { 
        cancel: { 
         label: 'Cancel', 
         className: 'btn' 
        }, 
        save: { 
         label: 'Save', 
         className: 'btn btn-primary', 
         callback: function() { /* your 'save' callback */ } 
        } 
       } 
      }); 
     }); 
}); 

message是用来填写的选项.modal-body生成的模态的一部分。然而，这是一个天真的实现，因为它不包含任何检查来验证你没有收到一个完整的HTML页面，例如response。

我通常还会在执行$.get函数之前包含一个加载动画，但这是我认为您可以自己弄清楚的。