时间戳

首页 > 解决方案 > 在我调整屏幕大小之前，模态中的滑块不会显示

javascript - 在我调整屏幕大小之前，模态中的滑块不会显示

问题描述

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

我试图对这个问题进行一些研究，有人说问题是因为模态在一开始就被隐藏了，并且尺寸计算存在问题。

我尝试在打开模式时手动调整屏幕大小，但它不起作用。

    <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>

标签： javascriptbootstrap-4sliderbootstrap-modalwindow-resize

解决方案

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

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

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

var widget = new GalleryPlayerWidget(); widget.decorate(document.getElementById('widget1'));

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

推荐阅读