Ruby on rails 引导模式不会弹出,但会推送html内容

Ruby on rails 引导模式不会弹出,但会推送html内容,ruby-on-rails,twitter-bootstrap,Ruby On Rails,Twitter Bootstrap,当通过Ajax单击按钮触发时,模式内容显示良好。但是,模式内容出现在HTML内容中,并向下推其他内容,而不是弹出模式并使其后面的整个页面变为灰色和不活动。我在rails之外的另一个框架(闪亮)上运行了一个类似的模式,效果很好。我遇到了一个类似的问题:。工作解决方案是在CSS中这样做:html{overflow:hidden;height:100%;}和 body{overflow:auto; height:100%;} 我试过了,但没有成功。其他类似的帖子得出结论,问题是由于引导程序中的错

当通过Ajax单击按钮触发时,模式内容显示良好。但是,模式内容出现在HTML内容中,并向下推其他内容,而不是弹出模式并使其后面的整个页面变为灰色和不活动。我在rails之外的另一个框架(闪亮)上运行了一个类似的模式,效果很好。我遇到了一个类似的问题:。工作解决方案是在CSS中这样做:
html{overflow:hidden;height:100%;}

body{overflow:auto;
  height:100%;}
我试过了,但没有成功。其他类似的帖子得出结论,问题是由于引导程序中的错误造成的,并建议修改引导程序源代码,但我认为这些问题是自帖子发布之日起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/views/indicators/new_release.js.erb

$("#modal-window").html("<%= escape_javascript(render 'indicators/indicator_modal') %>");
$("#modal-window").modal('show');
$(“#模态窗口”).html(“”);
$(“#模态窗口”).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特有的问题吗?如何创建模式弹出窗口?

看起来您缺少了一些模式所需的标记()

你有:

<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" ... >

如果您正在使用引导gem,请尝试将以下行添加到/app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require_tree .
这是你的电话号码

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

bootstrap/js/modal.js  

即使使用了
它也会显示相同的内容
#modal window
上是否有任何可能影响显示属性的自定义样式?我还将删除
隐藏
类,因为
.modal
已经有了
显示:无
。我已经注释掉了我所有的样式,但得到了相同的结果将行添加到
应用程序。js
没有解决问题,而是添加了行
@import“引导链轮”@导入“引导”
.scss
文件解决了问题好的,样式表没有导入到应用程序中。下面的文档是最好的。
bootstrap/js/modal.js