Why is this Bootstrap modal stuck behind the fade? - css

Question

I have a modal that is only rendered within the body tag, but it still appears stuck behind the fade.
Here is the code in my ERB:
<div class="modal fade add-video-popup" id="add-video-step-4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="titles clearfix">
<h2>Upload a Video</h2>
<p><i>Step 1 of 2 - TESTING 1, 2, 3</i></p>
</div>
<div class="content">
<% if #family_tree %>
<%= simple_form_for([#family_tree, #video], :remote => true) do |f| %>
<div class="column">
<div class="f-row">
<%= f.input :title, label: "Title:" %>
</div>
<div class="f-row">
<%= f.input :description,label: "Description:" %>
</div>
<div class="f-row">
<%= f.input :circa, as: :datepicker, start_year: Date.today.year - 5, label: "Circa:" %>
</div>
<div class="f-row">
<label for="family">Family in this video:</label>
<%= f.collection_select :user_ids, #family_tree.members.order(:first_name), :id, :first_name, {}, {multiple: true} %>
</div>
</div>
<%= f.button :submit, "Add Video", id: "video-submit" %>
<% end %>
<% end %>
</div> <!-- //content -->
</div> <!-- //modal fade -->
Here is the actual HTML generated:
<div class="modal fade add-video-popup in" id="add-video-step-4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="titles clearfix">
<h2>Upload a Video</h2>
<p><i>Step 1 of 2 - TESTING 1, 2, 3</i></p>
</div>
<div class="content">
<form accept-charset="UTF-8" action="/family_trees/1/videos" class="simple_form new_video" data-remote="true" id="new_video" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<div class="column">
<div class="f-row">
<div class="control-group string required video_title"><label class="string required control-label" for="video_title">Title:</label><div class="controls"><input class="string required" id="video_title" name="video[title]" type="text"></div></div>
</div>
<div class="f-row">
<div class="control-group string required video_description"><label class="string required control-label" for="video_description">Description:</label><div class="controls"><input class="string required" id="video_description" name="video[description]" type="text"></div></div>
</div>
<div class="f-row">
<div class="control-group datepicker optional video_circa"><label class="datepicker optional control-label" for="video_circa">Circa:</label><div class="controls"><input class="datepicker optional hasDatepicker" id="video_circa" name="video[circa]" type="text"><input class="circa-alt" id="video_circa" name="video[circa]" type="hidden"></div></div>
</div>
<div class="f-row">
<label for="family">Family in this video:</label>
<input name="video[user_ids][]" type="hidden" value=""><select id="video_user_ids" multiple="multiple" name="video[user_ids][]"><option value="3">Jackie Lynn</option>
<option value="1">Marcamus</option>
<option value="2">Mike Green</option>
<option value="8">Very</option></select>
</div>
</div>
<input class="btn" id="video-submit" name="commit" type="submit" value="Add Video">
</form> </div> <!-- //content -->
</div>
I had read on other questions that it is the positioning of the modal, so I made sure it appears right before the footer tag and not nested within any other tag and I am still having this issue.
Thoughts?