难以将模态窗口代码集成到Div

时间:2015-11-04 04:11:43

标签: jquery html css video

我创建了以下代码以容纳临时的表格设计网站:

<a class="popup-modal" href="#videos">
  <img src="images/playvideobuttn.jpg" width="139" height="43" alt="" />
</a>

<div id="videos" class="mfp-hide white-popup-block">
  <video poster="images/play-poster.jpg" data-setup="{}" preload="auto" onclick="this.play();">
    <source src="images/b2bpromo.mp4" type="video/mp4">
      <source src="images/b2bpromo.ogg" type="video/ogg">
        Your browser does not support the video tag.
  </video>

  <p><a class="popup-modal-dismiss" href="#">X</a>
  </p>
</div>

我已成功将其整合到已提交的网站中;但是现在我使用CSS和div重新对站点进行映像,我无法正确地集成代码。自从我开发了一个网站以来已经有一段时间了,我对此并不清楚。任何建议都将不胜感激。

谢谢! 史蒂夫M。

1 个答案:

答案 0 :(得分:0)

试试这个

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Click me</button>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Head:-)</h4>

            </div>
            <div class="modal-body">
                <p>Modal content goes here</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Get outta here!</button>
            </div>
        </div>
    </div>
</div>

工作小提琴: http://jsfiddle.net/iamraviteja/ut3rp9ae/1/