Rails 4中Bootstrap模态框无法弹出

Question

Rails 4中Bootstrap模态框无法弹出

javascripttwitter-bootstrapruby-on-rails-4

3

我跟随示例编写了一个带有模态弹出窗口的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') %>");

任何帮助都会受到赞赏！！

- harshit

看起来你缺少一些依赖项。至少，我没有看到你包含Bootstrap CSS的地方（它似乎不是CSS捆绑包的一部分）。 - Tieson T.

啊，好的，我添加了CSS而不是点。现在点击后我看到屏幕淡入，但模态框没有显示。我也更新了Heroku链接。 - harshit

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tieson T. · 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函数之前，我通常还会包括一个加载动画，不过这是我认为你自己可以解决的问题。