Bootstrap 模态不会显示在视频元素上答案

【问题标题】：Bootstrap modal won't show over video elementBootstrap 模态不会显示在视频元素上
【发布时间】：2014-09-09 19:28:11
【问题描述】：

我正在尝试在单击“共享”链接时显示模式框。按照文档，这应该可以工作。看起来它可能只是显示在视频元素的后面，但更改 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;
}

【问题讨论】：

标签： jquery css twitter-bootstrap modal-popup

【解决方案1】：

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

Updated JSFiddle

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

【讨论】：

问题在于，它会在页面加载时加载模式。它应该只在点击“分享”时加载
这是不正确的。在 Bootstrap 中，.modal 类最初隐藏了 div。当您单击触发器时，在您的情况下共享，它会添加 .in 类。这就是显示模态的内容。你看到我更新的 JSFiddle 了吗？它非常适合我。
是的，我看到小提琴在工作。在我的小提琴之外的代码中（这是一个精确的重复），它在页面加载时加载模式。而且你不能退出模态。
这意味着您的 jQuery 中的某个地方可能存在问题。在选择器上或缺少括号、分号等。
就可以了。 Bootstrap JS 使用 JQuery 功能，这可能就是您收到未定义函数错误的原因。 Bootstrap 寻找了一些尚不存在的东西。