Question

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

<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 - ＆gt; http://jsfiddle.net/03m1fzso/ 在我看来，自从重新检查代码以来，针对某个类的最佳解决方案可能导致不明智，除了偶然使用该类多次的风险。

背景变黑但模态的内容不会出现

1 个答案: