Question

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

这是我的代码（很多行）

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功能之前包含一个加载动画，但我认为你可以自己解决这个问题。

Rails 4中的Bootstrap模式不会弹出

1 个答案: