背景变黑但模态框的内容没有出现

Question

我正在尝试使用 modal 属性。当用户单击图像时，它会显示一些文本，我编写了以下代码。

<div class="col-md-4 gallery-left">
   <a data-toggle="modal" data-target=".bs-example-modal-md" href="#myModal" class="b-link-stripe b-animate-go  thickbox">
      <img class="img-responsive lot" src="{% static 'img/toothbrush.jpg' %}" alt="">
      <div class="b-wrapper">
          <div class="b-animate b-from-left b-delay03 ">
              <i class="plus second"> Picture description </i>
          </div>
      </div>
   </a>
</div>
<div id="myModal" class="modal fade" role="dialog">
     <div class="modal-dialog">
     <!-- Modal content-->
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">&times;</button>
             <h4 class="modal-title">Modal Header</h4>
         </div>
         <div class="modal-body">
              <p>Some text in the modal.</p>
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
     </div>
  </div>
</div>

背景变黑但没有显示内容。 我已成功使用模态显示用户使用以下代码单击的图像：

<a data-toggle="modal" data-target=".bs-example-modal-md" href="{% static 'img/toothbrush.jpg' %}" class="b-link-stripe b-animate-go  thickbox">

为什么当我尝试用文本而不是图像显示 div 时它不起作用？

Answer 1

你已经扭转了局面。

<a data-toggle="modal" data-target=".bs-example-modal-md" href="#myModal" class="b-link-stripe b-animate-go  thickbox">

应该是

<a data-toggle="modal" data-target="#myModal" href="#" class="b-link-stripe b-animate-go  thickbox">

即引用模态标记的id。或者您实际上应该将 bs-example-modal-md 作为类添加到 #myModal ：

<div id="myModal" class="modal fade bs-example-modal-md" role="dialog">

两者都可以。无论哪种情况，您都应该使用href="#"。这里的例子#myModal -> http://jsfiddle.net/03m1fzso/ 在我看来是最好的解决方案，因为当你重新检查代码时，以一个类为目标可能会导致不清晰，除了偶然使用类不止一次的风险.