为什么Bootstrap-3模式不工作？

Question

​

<div class='container row'>
  <div style='padding-top:2em;' class='col-md-4 col-sm-4 col-xs-4'>
    <img data-toggle='modal' href='#modal-id' src='img/".$row_now[' image ']."' alt='No Image Uplaoded' class='img-thumbnail img-responsive' />
  </div>
  <div class='modal fade' id='modal-id'>
    <div class='modal-dialog'>
      <div class='modal-content'>
        <div class='modal-header'>
          <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
          <h4 class='text-primary modal-title'>".$row_now['title']."</h4>
        </div>
        <div class='modal-body'>
          <img src='img/".$row_now[' image ']."' alt='No Image Uplaoded' class='img-responsive' />
        </div>
      </div>
    </div>
  </div>

  <div class='col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-md-7 col-sm-7 col-xs-7'>
    <h2 class='text-left text-primary'>".$row_now['title']."</h2>
    <p class='text-left' style='color:white;'>".$row_now['body']."</p>
    <a href='http://".$row_now[' link ']."'>".$row_now['link']."</a>
    <h4 class='text-left'>Uploaded By: ".$row_now['uname']."</h4>

    <h4 class='text-left'>".$lite['phone']."</h4>
  </div>
</div>

​

我的意图是使用图像作为触发器来打开模式。我看到的只是一个褪色的屏幕，对任何点击都没有反应，剩下的唯一选择就是刷新pge

Answer 1

您缺少数据目标属性，并且您的图像上有一个href。尝试将图像替换为以下代码：

<a href="#" data-target="#modal-id" data-toggle='modal' ><img src='img/".$row_now['image']."' alt='No Image Uplaoded' class='img-thumbnail img-responsive' /></a>

Answer 2

IMG标记没有href属性。尝试将您的img包装在锚定标记a中，并如@Mark所指出的那样，添加data-target属性：

 <a data-toggle="modal" data-target='#modal-id'><img   src='img/".$row_now['image']."' alt='No Image Uplaoded' class='img-thumbnail img-responsive' /></a>