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

Question

I have a slider inside of a modal. However, on modal show, the slider does not show on the screen. When I resize the window manually, it would appear.

I've attempted to do some research regarding this issue and individuals have stated that the problem is because the modal is hidden at the start and there are issues with the size calculations.

I have tried to do a manual resize of the screen when the modal is opened but it does not work.

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

There are no error messages but its just a visual glitch.

Edit: This is the code for my modal

<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

If you need to decorate widgets manually you can you tiny API.

Change class name pa-* (for example, set to pa-custom-gallery-player) to another name to disable auto-decorator. Setup element ID (in this case set to widget1).

Decorate widget with the following javascript code (for gallery player):

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

After Public album Embed UI script loaded, there are following object constructors are available: CarouselWidget, GalleryPlayerWidget.

Here is a small example: https://www.publicalbum.org/examples/decorate-widget-onclick.html

Source