Question

我目前正在尝试将视频显示在模态框中，但模式正被推下并在背景幕后。

我已经尝试将其移动到body标签的底部，删除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

你不需要自己制作它，你可以使用现有的twitter-bootstrap模式。

<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>

模态框没有出现在背景前面

1 个答案: