リンクをクリックするとモーダルをフェードしようとしますが、モーダルポップアップに黒いフェードが表示されます。モーダルとリンクのコードは次のとおりです
次のリンクのモーダル フェードをクリックします。
<%= link_to 'New Trade','#myModal', :class => 'btn',:style => 'float:right;', :role => 'button', :data =>{ :toggle => 'modal', :keyboard => true, :backdrop => true } %>
そして、以下はモーダルコードです
<div id="myModal" class="modal fade" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" keyboard="true">
<%= simple_form_for @trade_category, :url => create_trade_category_path(@trade_category), :html => { :class => 'form_height'} do |f| %>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">New Trade Category</h3>
</div>
<div class="modal-body">
<%= f.input :name,:lable => false, :autofocus => true, :placeholder =>"Trade category name", :class=> 'input-block-level' %>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<%= f.submit "Create Trade category", :class=> "btn btn-primary" %>
</div>
<% end %>
</div>
そして、私は次の出力を得ました
CSSは以下のとおりです
.modal-backdrop { 位置: 固定; 上: 0; 右: 0; 下: 0; 左: 0; Z インデックス: 1040; 背景色: #00000}
.modal { 位置: 固定; トップ10%; 左: 50%; Z インデックス: 1050;}