jquery - 难以将模态窗口代码集成到div中

Question

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

<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.

Answer 1

试试这个

<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>

工作 fiddle : http://jsfiddle.net/iamraviteja/ut3rp9ae/1/