Bootstrap modal won't show over video element

Question

I'm trying to get a modal box to show on clicking "Share" link. Following documentation, this should work. It appears that it may just be showing behind the video element, but changing the z-index hasn't helped.

Here's the 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;
}

score 0 · Answer 1 · answered Sep 09 '14 at 19:34

0

You need to remove hide from your modal div. That is keeping it hidden at all times. You do not need to use that, it hides by default on its own.

Updated JSFiddle

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

answered Sep 09 '14 at 19:34

Tricky12

6,752
1
27
35

The problem with that, is that it loads the modal on page load. It should only load on clicking "Share" – Matt Sep 09 '14 at 19:39
That is not correct. In Bootstrap, the `.modal` class hides the div initially. When you click the trigger, Share in your case, it adds the `.in` class. That is what shows the modal. Did you see my Updated JSFiddle? It works perfectly for me. – Tricky12 Sep 09 '14 at 19:42
Yes, I saw the fiddle working. In my code outside of the fiddle(which is an exact duplication), it loads the modal on page load. And you can't exit out of the modal. – Matt Sep 09 '14 at 19:43
"Uncaught TypeError: undefined is not a function" which is showing up in bootstrap.min.js – Matt Sep 09 '14 at 19:46
1

That means that you probably have an issue in your jQuery somewhere. Either on a selector or missing a bracket, semi-colon, etc. – Tricky12 Sep 09 '14 at 19:48
This is what happens when you take out "hide" from the modal display:http://jsfiddle.net/h3WDq/210/ – Matt Sep 09 '14 at 19:50
Looks like the issue was that jQuery was loading after BootstrapJS. Just a loading priority issue. – Matt Sep 09 '14 at 19:54
1

That would do it. Bootstrap JS uses JQuery functionality, which is probably why you were getting an undefined function error. Bootstrap looked for something that wasn't there yet. – Tricky12 Sep 09 '14 at 19:57

Bootstrap modal won't show over video element

1 Answers1