Bootstrap modal 不弹出但推送 html 内容答案

【问题标题】：Bootstrap modal does not popup but pushes html contentBootstrap modal 不弹出但推送 html 内容
【发布时间】：2017-11-04 14:06:05
【问题描述】：

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

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

我试过但没有用。其他类似的帖子得出的结论是，问题是由于 Bootstrap 中的错误造成的，并建议修改 bootstrap 源代码，但我想它们自 2 多年前的帖子日期以来就已修复。

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

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

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

app/views/indicators/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 的问题吗？如何制作模态弹窗？

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

您似乎缺少模态所需的一些标记 (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" ... >

【讨论】：

即使使用<div class="modal-dialog" ... > <div class="modal-content"，它仍然看起来一样
#modal-window 上是否有任何自定义样式可能会影响例如display 属性？我还要删除hide 类，因为.modal 已经有display: none。
我已经注释掉了我所有的样式，但得到了相同的结果

【解决方案2】：

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

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

//= require bootstrap-sprockets

否则，如果通过源代码手动使用 boostrap，请尝试将以下文件添加到应用程序中的 javascript 目录

bootstrap/js/modal.js

【讨论】：

将行添加到application.js 没有解决问题，但将行@import "bootstrap-sprockets"; @import "bootstrap"; 添加到.scss 文件解决了问题
很好，样式表没有导入到您的应用程序中。最好的方法是遵循文档。