Question

我在模态中有一个滑块。但是，在模式显示中，滑块不会显示在屏幕上。当我手动调整窗口大小时，它将出现。

我已尝试对此问题进行一些研究，并且有人指出，问题是因为模态一开始是隐藏的，并且尺寸计算存在问题。

我已尝试在模式打开时手动调整屏幕大小，但无法正常工作。

    <script type="text/javascript">
      $(document).on('show.bs.modal', function (e) {
        if (typeof(Event) === 'function') {
          // modern browsers
          window.dispatchEvent(new Event('resize'));
        } else {
          // for IE and other old browsers
          // causes deprecation warning on modern browsers
          var evt = window.document.createEvent('UIEvents'); 
          evt.initUIEvent('resize', true, false, window, 0); 
          window.dispatchEvent(evt);
        }
      });
    </script>

没有错误消息，只是视觉故障。

编辑：这是我的模态代码

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" 
role="dialog" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl"></div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <div class="modal-body">
            <!-- Project Details Go Here -->
            <h2 class="text-uppercase">Title</h2>
            <p class="item-intro text-muted">Subtitle</p>
            <img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">
            <p style="text-align: left;">Description 1</p>
            <p style="text-align: left;">Description 2</p>

<!--Script for Carasusel-->
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
    <div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
    data-link="https://photos.app.goo.gl/CSV7NDstShTUwUZq5"
    data-title="Mr. Monstro"
    data-description="Mr. Monstro is a great traveler. He visited Madeira, Poland, but also Georgia, Italy ...">
    <img data-src="https://lh3.googleusercontent.com/XlH6wo2PzrAEqmplYrZwV0fI-2TafTT6BRwZhKDfZSHd_zT7HIdPyPWd3Xuqhn1QQADuTJ32QFmcgYiTOEU0sC4Bvf-VyTIiq-DxxEaxIeWDYyUK_VjaW8-zrMGBvekDZT77lpduYQ=w1920-h1080" src="" alt="" />
    <img data-src="https://lh3.googleusercontent.com/HISe-DV_b4gjLvSEGzrJlsqBU2rSE8uQpSqHHKTPihg_Ax9VtfCrOrvdXF01raBeBleAWQKI7Hfb4_w9vZeJKFymQfNTlubwXxTBTbqGTPwjg7S0CBtQsQJqsspvIhD9c-pniSZrEw=w1920-h1080" src="" alt="" />
    <img data-src="https://lh3.googleusercontent.com/05lhR1IAQY_B9rdQ_GvHDNLe1lJsSPyyuDeIMkt--gDDAnO2_EATwif7-sfNd2K_48RvyqKmN-u2svKZ06yfh8bnrbQ5kBUrIHfZvWheTzDGhIeFd1roPor-F_BycJmVKbQO6a9EaA=w1920-h1080" src="" alt="" />
    <img data-src="https://lh3.googleusercontent.com/VvK__Vx8kpPTP57WZPLblacZbTE0NqWeIGTyHSQ8Rq9pvOpWQG_CQE_tOc6jHPtj02XIBYa0Zo9fWbXXQyNYs9hDGGj34QibKFJky4W9nYBpSb57OwxiQoDyo25vzIXMTN2SNxuzqg=w1920-h1080" src="" alt="" />
</div>
<ul class="list-inline">
    <li>Date: July 13 - August 11</li>
    <li>Category: Events</li>
    <li>Partners: THD</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
              <i class="fas fa-times"></i>
              Close Project</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

使用Google闭包的公共相册画廊装饰，并且仅在真正调整屏幕大小时才会触发此事件。查看 ViewportSizeMonitor 的源代码：

if (!goog.math.Size.equals(size, this.size_)) { ...在〜160行。

您将需要块自动装饰器，方法是更改类的名称，添加元素ID并使用以下代码手动装饰小部件：

FeedbackSubscriptionFilter: Type: AWS::Logs::SubscriptionFilter Properties: RoleArn: 'arn:aws:iam::xxxxxx:role/CloudwatchKinesis' LogGroupName: '/aws/lambda/function' FilterPattern: '' DestinationArn: 'arn:aws:firehose:eu-west-1:yyyyyyyyyy:deliverystream/function-delivery'

检查有关小部件和演示的最新更新信息： https://www.publicalbum.org/blog/carousel-slideshow-gallery-widget-july-update#tiny-widget-api。

直到我调整屏幕大小后，模态中的滑块才会显示

1 个答案: