- 首页
- 其他开发
- ruby on rails 中的 Bootstrap 模式不起作用
ruby on rails 中的 Bootstrap 模式不起作用
[英] Bootstrap modal in ruby on rails not working
本文介绍了ruby on rails 中的 Bootstrap 模式不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现一个模态来为我的应用创建一个新用户.出于某种原因，无法使其工作.
这段代码只是淡入淡出，没有显示模态，我不知道为什么.事实上，我使用的是与这个答案完全相同的代码 如何使用link_to添加bootstrap modal，让链接内容在modal中打开?
<%= link_to "Open modal", "#myModal", :class =>"btn", "数据切换" =>模态"%><!-- 模态--><div id="myModal" class="modal hidefade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">模态标头</h3>
<div class="modal-body"><p>一个精致的身体……</p>
<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button>
我的宝石:
gem 'rails', '5.0.2'# 使用mysql作为Active Record的数据库gem 'mysql2', '>= 0.3.18', '<0.5'gem 'faker', '1.6.6'宝石'will_paginate'，'3.1.0'gem 'bootstrap-will_paginate', '0.0.10'宝石'bcrypt'，'3.1.11'gem 'bootstrap-sass', '3.3.6'宝石美洲狮"，3.4.0"gem 'sass-rails', '5.0.6'宝石 'uglifier', '3.0.0'宝石咖啡轨"，4.2.1"宝石'jquery-rails'，'4.1.1'宝石涡轮链接"，5.0.1"宝石'jbuilder'，'2.4.1'
app/assets/javascripts/application.js
中的下面一行
//= 需要 jquery//= 需要 jquery_ujs//= 需要引导程序//= 需要引导链轮
还有我的scss
@import "bootstrap-sprockets";@import "引导程序";
解决方案
您需要从 #myModal 模态中删除 hide 类，因为它给了它一个 display: none !important CSS 规则，这就是你看不到它的原因:
检查一下:
<div id="myModal" class="modalfade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">模态标头</h3>
<div class="modal-body"><p>一个精致的身体……</p>
<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button>
而且很可能您需要将 .modal-header 包装在 <div class="modal-dialog" role="document">和一个 <div class="modal-content"> 来查看你的好".
I'm trying to implement a modal to create a new user for my app. For some reason a can't make it work.
This code just fade in and out, and no modal is showing up, i can't figure out why. In fact, I'm using the exact same code from this answer How to add bootstrap modal with link_to so the link content open in modal ?
<%= link_to "Open modal", "#myModal", :class => "btn", "data-toggle" => "modal" %>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">
<p>One fine body…</p>
</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>
</div>
My gems:
gem 'rails', '5.0.2'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.18', '< 0.5'
gem 'faker', '1.6.6'
gem 'will_paginate', '3.1.0'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'bcrypt', '3.1.11'
gem 'bootstrap-sass', '3.3.6'
gem 'puma', '3.4.0'
gem 'sass-rails', '5.0.6'
gem 'uglifier', '3.0.0'
gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.4.1'
below line in app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
And my scss
@import "bootstrap-sprockets";
@import "bootstrap";
解决方案
You need to remove the hide class from the #myModal modal, because that's given it a display: none !important CSS rule, that's why you can't see it:
Check with this:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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">
<p>One fine body…</p>
</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>
</div>
</div>
</div>
And most probably you'll need to wrap your .modal-header within a <div class="modal-dialog" role="document"> and a <div class="modal-content"> to see your it "well".
这篇关于ruby on rails 中的 Bootstrap 模式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
