Ruby on Rails ヘッダーにモーダルを使用すると反応しなくなる。

ruby on rails でアプリを開発しており、ヘッダーの一部分にモーダルを使用したいと考えております。

headerを固定させたく、application.scssにheaderを固定するためのcssを記載すると
モダール画面が表示はされますが、モダールを開いた時のバック画面と同様の暗さとなりボタンを触ることも、閉じるボタンを押すこともできなくなり、どこのボタンも画面が薄暗いのみで反応しません。リロードするとモーダルは閉じます。
cssのコードを無くすとモーダルはしっかりと動きます。

application.html.erb

application.html.erb
  <body id="wrapper">
    <!-- ヘッダー -->
    <%= render "layouts/header" %>
    
    <!-- Main部分 -->
      <%= yield %>
      
    <!-- Footer -->
    <%= render "layouts/footer" %>
  </body>

_header.html.erb

      <header>
        <div class="header-content">
        <%= link_to 'SentoLog', root_path, class: "nav navbar-nav navbar-left" %>
          <ul class="nav navbar-nav navbar-right">
            <li><%= render 'layouts/modal', sensitsus: Sensitsu.all, kounous: Kounou.all, oyutypes: Oyutype.all %></li>
            <li><%= link_to '泉質', '' %></li>
            <li><%= link_to '条件', '' %></li>
            <li><%= link_to '都道府県', '' %></li>
            <li><%= link_to '温泉地を登録する', new_users_onsen_spot_path %></li>
            <li><%= link_to '温泉一覧', users_onsen_spots_path %></li>
            <li><%= link_to '新規登録', new_user_registration_path %></li>
            <li><%= link_to 'ログイン', new_user_session_path %></li>
            <li><%= link_to 'About', about_path %></li>
          </ul> 
        </div>
      </header>

_modal.html.erb

<div data-toggle="modal" data-target="#sampleModal" style="margin: 18px;" data-turbolinks="false">
	泉質
</div>

<!-- モーダル・ダイアログ -->
<div class="modal fade" id="sampleModal" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content row">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                <h4 class="modal-title"><strong>お好みの温泉をお選びください</strong></h4>
            </div>
                <div class="modal-body col-xs-3">
                    <strong>泉質</strong>
                </div>
                <div class="modal-body col-xs-9">
                    <% sensitsus.each do |sensitsu| %>
                        <%= link_to sensitsu.name, users_sensitsu_path(sensitsu.id), class: "btn btn-default" %>
                    <% end %>
                </div>
                <div class="modal-body col-xs-3">
                    <strong>お湯タイプ</strong>
                </div>
                <div class="modal-body col-xs-9">
                    <% kounous.each do |kounou| %>
                        <%= link_to kounou.name, users_kounou_path(kounou.id), class: "btn btn-default" %>
                    <% end %>
                </div>
                <div class="modal-body col-xs-3">
                    <strong>効能</strong>
                </div>
                <div class="modal-body col-xs-9">
                    <% oyutypes.each do |oyutype| %>
                        <%= link_to oyutype.name, users_oyutype_path(oyutype.id), class: "btn btn-default" %>
                    <% end %>
                </div>
            <div class="row">
                <div class="col-xs-12 pull-right">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 @import "bootstrap-sprockets"; 
 @import "bootstrap"; 

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  
header {
  background:#fff;
  box-shadow:0 2px 8px rgba(30,30,80,.3); 
  left:0;
  line-height:1;
  position:fixed;
  top:0;
  width:100%;
  z-index:100;
  text-align:center;
  padding:1rem;
}

どなたか
ご教授していただけると幸いです。