为什么Windows调整大小无法与模式一起使用？

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>

<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);
}
console.log('works');

}）;

Answer 1

如果您需要手动装饰小部件，则可以使用小型API。

将类名pa-*（例如，设置为pa-custom-gallery-player）更改为另一个名称以禁用自动装饰器。 设置元素ID（在这种情况下，设置为widget1）。

使用以下JavaScript代码装饰小部件（适用于Gallery Player）：

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

加载“公开相册”的Embed UI脚本后，可以使用以下对象构造函数：CarouselWidget，GalleryPlayerWidget。

这是一个小例子： https : //www.publicalbum.org/examples/decorate-widget-onclick.html

资源