Bootstrap modal blocks underlying elements even before it is even called

Question

My bootstrap modal blocks the content of the underlying page even before it is called. If there is a link beneath the screenshot shot showed, it cannot be accessed before modal is called. It acts as a layer. Once modal is called, again we can access the underlying elements.

Before Accessing Modal:

Once Modal is accessed:

Here is my code in show.html.erb. How to tackle it ? Is there any particular place we need to keep our Modal code in our document ?

 <!-- Modal for uploading Profile Image -->
<div class="modal fade" id="myPicUploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
        <h4 class="modal-title" id="myModalLabel">Upload Picture</h4>
      </div>
      <div class="modal-body">
       <!-- Showing Exisiting Profile Image -->
        <% if @user.avatar.present? %>
         <%= image_tag @user.avatar.url(:profile), class: "img-thumbnail" %>
        <%else%>
         <%= image_tag "missing-profile.png", class: "img-thumbnail" %>
        <%end%>
       <p> </p> 
      <!-- Form to upload new pic -->
       <%= simple_form_for @user do |f| %>
        <%= f.input :avatar, label: false %>
       </div>
      <div class="modal-footer">
        <%= f.submit "Save", class: "btn btn-primary" %>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <%end%>  
      </div>
    </div>
  </div>
</div> 

<div ng-controller = "userLeftPanelCtrl" ng-init = "init()">
<!-- Left Panel of User -->
 <div class="well UserProfileLeftPane span2" >
  <!-- Panel options of User --> 
   <!-- Profile image of user -->
    <div class="UserProfileImageLeftBar">
     <% if @user.avatar.present? %>
      <%= image_tag @user.avatar.url(:profile), class: "img-thumbnail" %>
     <%else%>
      <%= image_tag "missing-profile.png", class: "img-thumbnail" %>
     <%end%>
     <%= link_to '#' do %>
      <span class="label label-primary" data-toggle="modal" data-target="#myPicUploadModal" >Upload Pic</span>
     <%end%>
    </div>
   </div>
  </div>

Answer 1

I put $('.modal').hide(); after initialization of the modal. Works, although there are many ways to fix this.