为什么Bootstrap-3 Modal不起作用

Why is the Bootstrap-3 Modal not working?

本文关键字：不起作用 Modal Bootstrap-3 为什么      更新时间：2023-09-26

<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

您缺少数据目标属性，并且您的图像上有一个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>

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>
相关文章：