Question

我试图在点击＆＃34;分享＆＃34;时显示模式框。链接。以下文档，这应该工作。它似乎只是在视频元素后面显示，但改变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

您需要从模态div中删除hide。这就是让它一直隐藏起来。您不需要使用它，它默认隐藏它自己。

Updated JSFiddle

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

Bootstrap模式不会显示在视频元素上

1 个答案: