Rails 4中的引导模式不会弹出

Question

我按照这个例子编写了一个带有模式弹出的rails应用程序。

Heroku演示链接

这是我的代码(很多行)

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部分的选项。不过，这是一个幼稚的实现，因为它不包括任何检查，以验证您没有在response中获得完整的HTML页面。

在执行$.get函数之前，我通常还包括一个加载动画，但我认为您可以自己解决这个问题。