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>

为什么Bootstrap-3模态不起作用？

2 个答案: