为什么Bootstrap-3 Modal不起作用？

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>