代码之家 › 专栏 › 技术社区 › Nicola Spadari

Bootstrap 4.0.0 modal carousel相册动画调整大小错误

gallery carousel height modal-dialog twitter-bootstrap

Nicola Spadari · 技术社区 · 7 年前

我正在尝试创建一个由专辑(情调)组成的画廊;每个模式内部都有一个基本的旋转木马幻灯片。
里面的图片可以有不同的高度:我找到了设置高度变化动画的方法,但是当我用 data-slide-to="x" 直接打开不同高度的图像,不会显示。

我把这个问题弄得一团糟: here

如果打开第一个模式并浏览图片,一切都正常。但是,如果在幻灯片1或3(方形)上关闭第一个模式,然后突然打开第二个模式(重定向到幻灯片2,其高度不同),动画就会这样做 height: 0

如何解决此问题?非常感谢。

1 回复 | 直到 7 年前

Zac 7 年前

问题是您的carousel和modal位于同一html元素上,因此 e.relatedTarget 不是你所期望的

我建议将carousel div移动到modal主体内部,并给它自己的id,如下所示:

$('.carousel').on('slide.bs.carousel', function(e) {
  $(this).find('.carousel-inner').animate({
    height: $(e.relatedTarget).height()
  }, 300);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container text-center py-4 my-5">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card mb-4">
        <img src="https://via.placeholder.com/400x300?text=first%20album" class="w-100">
        <div class="card-body">
          <p class="card-text text-dark">first element</p>
          <div class="d-flex justify-content-between align-items-center">
            <a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="0" role="button">open</a>
            <button type="button" class="btn btn-sm btn-secondary">
                  some action
                </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card mb-4">
        <img src="https://via.placeholder.com/400x300?text=second%20album" class="w-100">
        <div class="card-body">
          <p class="card-text text-dark">second element</p>
          <div class="d-flex justify-content-between align-items-center">
            <a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="1" role="button">open</a>
            <button type="button" class="btn btn-sm btn-secondary">
                  another action
                </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="lightbox" class="modal fade position-absolute" role="dialog">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
      <div class="carousel slide" data-ride="carousel" tabindex="-1" id="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="pointer active"></li>
          <li data-target="#carousel" data-slide-to="1" class="pointer"></li>
          <li data-target="#carousel" data-slide-to="2" class="pointer"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://via.placeholder.com/350">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://via.placeholder.com/700x450">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://via.placeholder.com/550">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          </a>
        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
          </a>
          </div>
      </div>
      <div class="modal-footer px-3 pb-3 pt-0">
        <h5 class="modal-title text-uppercase mr-auto">Album num.X</h5>
        <a href="#" role="button" data-dismiss="modal" class="btn btn-primary px-3">Close</a>
      </div>
    </div>
  </div>
</div>

不停摆弄 here