Модальный ящик, не появляющийся на фоне фона

Question

В настоящее время я пытаюсь получить видеоролик для отображения в модальном поле, но модальный толкается вниз и за фоном.

Я попытался переместить его в нижнюю часть тегов тела, удалив z-index, играя с z-index, установив фоном на false.

HTML

<div id="explainer"> 
<div class="explainerLink pull-center"><img src="themes/base/img/explainer-img-1.png" class="active animated bounceInUp" /> <img src="themes/base/img/explainer-img-2.png" class="" /> <img src="themes/base/img/explainer-img-3.png" class="" /> <img src="themes/base/img/explainer-img-4.png" class="" /></div> 
<div class="explainerPlay pull-center"> 
<h1><a href="#videoModal"><i class="fa fa-play-circle" data-toggle="modal" data-target="#videoModal"></i></a></h1> 
</div> 
<div class="explainerModal hide fade" id="videoModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1"> 
<div class="responsive-iFrame-explainer pull-center"><iframe width="0" height="0" allowfullscreen="allowfullscreen" class="video-vimeo team" frameborder="0" mozallowfullscreen="mozallowfullscreen" src="videolink" webkitallowfullscreen="webkitallowfullscreen"></iframe></div> 
</div> 
</div> 

CSS

.explainerModal{ 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    z-index: 1050; 
    max-width: 1280px; 
    margin: -250px 0 0 -280px; 
    overflow: auto; 
    background-color: #ffffff; 
    border: 1px solid #999; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    *border: 1px solid #999; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
      border-radius: 6px; 
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding-box; 
      background-clip: padding-box; 
} 

Answer 1

Вам не нужно, чтобы сделать его самостоятельно, вы можете использовать существующий твиттер-загрузчик модальным.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 
 

 
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     Content goes here 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>