javascript - 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反而;它动态生成模式标记，并且可以用作默认确认/提示/警报浏览器对话框的替代品。使用生成标记的优点是您不必处理重置模式通常需要的模板。

这是来 self 最近的项目的示例:

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 页面。

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