jquery - Bootstrap 模态不会显示在视频元素上

Question

我正在尝试在单击“共享”链接时显示模式框。按照文档，这应该可以工作。看起来它可能只是显示在视频元素后面，但更改 z-index 并没有帮助。

这是 JSFiddle：http: //jsfiddle.net/t5cLh1wn/

<div class="container">
<div class="row">
    <div class="col-md-4 about">About</div>
    <div class="col-md-4 logo"></div>
    <div class="col-md-4 share"><a href="#myModal1" role="button" class="btn" data-toggle="modal">SHARE</a>
    </div>
</div>
<div class="row">
    <div id="video">
        <video controls autoplay="autoplay" poster="video/trailer.jpg" width="1000" onclick="if(/Android/.test(navigator.userAgent))this.play();">
            <source src="video.mp4" type="video/mp4" />
            <source src="video/trailer.webm" type="video/webm" />
            <source src="video/trailer.ogv" type="video/ogg" />
            <embed src="video/flashfox.swf" width="600" height="480" flashVars="autoplay=true&amp;controls=true&amp;loop=true&amp;src=trailer.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
    </div>
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3>Sharing options</h3>

    </div>
    <div class="modal-body">Sharing options</div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

CSS

body{
  background-color: #000;
  color: #fff;
  font-family: arial;
}
/*CENTER VIDEO PLAYER*/
#video{
  text-align: center;
}
.about{
  float: left;
  padding-left: 80px;
  font-family: Knowledge;
  border-style: none;
}
.share{
  float: left;
  padding-left: 300px;
  font-family: Knowledge;
  border-style: none;
}

.logo{
  background-image: url('image.png');
  background-repeat: no-repeat;
  width: 350px;
  height: 130px;
  border-style: none;
}

Answer 1

您需要hide从模态 div 中删除。那就是一直隐藏它。您不需要使用它，默认情况下它会自行隐藏。

更新了 JSFiddle

<div id="myModal1" class="modal" tabindex="-1" role="dialog">