引導模式在紅寶石軌道上不起作用

我想實現一種模式來爲我的應用程序創建一個新用戶。出於某種原因，不能使其工作。引導模式在紅寶石軌道上不起作用

此代碼只是淡入淡出，沒有模態顯示，我不明白爲什麼。事實上，我使用的是完全相同的代碼從這個答案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>

我的寶石：

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'

低於線app/assets/javascripts/application.js

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require bootstrap-sprockets

而且我scss

@import "bootstrap-sprockets"; 
@import "bootstrap";

來源

2017-05-17 exsnake

您需要從#myModal模式刪除hide類，因爲這是給了它一個display: none !important CSS規則，這就是爲什麼你不能看到它：

檢查與此：

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

而且最有可能你您需要將您的.modal-header包裝在<div class="modal-dialog" role="document">和<div class="modal-content">之內，以便您「很好」地看到它。

來源

2017-05-17 15:25:35

謝謝！現在我可以看到它，但立即消失... – exsnake

好吧，我修復它刪除行'// = require bootstrap-sprockets'，不要，如果這是一個正確的事情... – exsnake

也許一些額外的代碼，我嘗試了一個乾淨的Rails應用程序，沒有問題。正如文檔所說，我只是'//需要bootstrap-sprockets'，不需要'// =需要bootstrap'。 –

顯示後模式將立即消失。所以我刪除了// = require.js文件中的bootstrap-sprockets並解決了這個問題。 FYI

來源

2017-06-29 23:03:45 Marshall

引導模式在紅寶石軌道上不起作用

回答

相關問題