Bootstrap模式不会弹出,但会推送html内容

时间:2017-06-03 06:44:53

标签: ruby-on-rails twitter-bootstrap

当通过Ajax点击按钮触发时,模态内容显示正常。但是,不是模式弹出并使整个页面背后的灰色和非活动状态,模式内容出现在HTML内容中并将其他内容向下推。我在一个不同的框架(Shiny)上运行了一个类似的模式而不是rails,它运行良好。我遇到了一个类似的问题:Twitter Bootstrap modal pushes html content to the left。工作解决方案是在CSS中执行此操作:html{overflow:hidden;height:100%;}

body{overflow:auto;
  height:100%;}

我试过但没有用。其他类似的帖子得出结论,问题是由于Bootstrap中的错误并建议修改bootstraps源代码,但我认为它们是固定的,因为帖子的日期超过2年前。

我的代码: /app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require_tree .

应用程序/视图/指示器/ index.html.erb

<%= link_to 'Add release', new_release_path,  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %>
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

/app/controllers/indicators_controller.rb

def new_release
    respond_to do |format|
      format.html
      format.js
    end
  end

应用程序/视图/指示器/ new_release.js.erb

$("#modal-window").html("<%= escape_javascript(render 'indicators/indicator_modal') %>");
$("#modal-window").modal('show');

/app/views/indicators/_indicator_modal.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>

这可能是Rails特定的问题吗?如何进行模态弹出?

2 个答案:

答案 0 :(得分:0)

看起来您错过了模式所需的一些标记(see the Bootstrap docs

你有:

<div class="modal hide fade" ... >
  <div class="modal-header" ... >
  <div class="modal-body" ... >
  <div class="modal-footer" ... >

但你需要:

<div class="modal hide fade" ... >
  <div class="modal-dialog" ... >
    <div class="modal-content" ... >
      <div class="modal-header" ... >
      <div class="modal-body" ... >
      <div class="modal-footer" ... >

答案 1 :(得分:0)

如果您使用bootstrap gem尝试将以下行添加到/app/assets/javascripts/application.js

这里是https://github.com/twbs/bootstrap-sass

//= require bootstrap-sprockets

或者如果使用源代码手动使用boostrap,请尝试将以下文件添加到应用程序中的javascript目录

bootstrap/js/modal.js