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

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

我通常还会在执行$.get 函数之前添加一个加载动画，但我认为你可以自己解决。