为什么 windows 调整大小不适用于模式？

Question

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

我试图对这个问题进行一些研究，有人说这个问题是因为模态框在开始时是隐藏的，而且尺寸计算有问题。

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

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

将 class 名称 pa-*（例如，设置为 pa-custom-gallery-player）更改为另一个名称以禁用 auto-decorator。设置元素 ID（在本例中设置为 widget1）。

使用以下 javascript 代码装饰小部件（用于画廊播放器）：

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

加载Public相册嵌入UI脚本后，可使用以下对象构造函数：CarouselWidget、GalleryPlayerWidget。

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

Source

为什么 windows 调整大小不适用于模式？

Why is windows resize not working with a modal?

javascript

jquery

window-resize

bootstrap-modal

bootstrap-4