在浏览器窗口调整大小之前，内容不会调整到模态窗口

Question

我正在尝试将动态内容放置在模式（弹出窗口）中，但它们的大小不正确。但是，如果我打开弹出窗口并调整浏览器窗口的大小，它们就会到位。在打开模式之前，内容的大小明显适合隐藏的 div。我怎样才能解决这个问题？我假设 jQuery 是要走的路？

下面是我所面临的屏幕截图。照片的顶部是当我单击链接打开模式时出现的内容，底部是在我调整窗口大小后发生的事情（这就是我所追求的）。

这是点击事件代码。

// Lightbox Link
            $(context).on('click', ThemifyGallery.config.lightbox, function(event){
                event.preventDefault();
                var $self = $(this),
                    $link = ( $self.find( '> a' ).length > 0 ) ? $self.find( '> a' ).attr( 'href' ) : $self.attr('href'),
                    $type = ThemifyGallery.getFileType($link),
                    $title = (typeof $(this).children('img').attr('alt') !== 'undefined') ? $(this).children('img').attr('alt') : $(this).attr('title'),
                    $iframe_width = (ThemifyGallery.isVideo($link)) ? '100%' : (ThemifyGallery.getParam('width', $link)) ? ThemifyGallery.getParam('width', $link) : '700',
                    $iframe_height = (ThemifyGallery.isVideo($link)) ? '100%' : (ThemifyGallery.getParam('height', $link)) ? ThemifyGallery.getParam('height', $link) : '100%';
                    if($iframe_width.indexOf("%") == -1) $iframe_width += 'px';
                    if($iframe_height.indexOf("%") == -1) $iframe_height += 'px';

                if( ThemifyGallery.isYoutube( $link ) ) {
                    // for youtube videos, sanitize the URL properly
                    $link = ThemifyGallery.getYoutubePath( $link );
                }
                var $args = {
                    items: {
                        src: $link,
                        title: $title
                    },
                    type: $type,
                    iframe: {
                        markup: '<div class="mfp-iframe-scaler" style="max-width: '+$iframe_width+' !important; height: '+$iframe_height+';">'+
                        '<div class="mfp-close"></div>'+
                        '<div class="mfp-iframe-wrapper">'+
                        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                        '</div>'+
                        '</div>'
                    }
                };
                if($self.find('img').length > 0) {
                    $.extend( $args, {
                        mainClass: 'mfp-with-zoom',
                        zoom: {
                            enabled: true,
                            duration: 300,
                            easing: 'ease-in-out',
                            opener: function() {
                                return $self.find('img');
                            }
                        }
                    });
                }
                if(ThemifyGallery.isVideo($link)){
                    $args['mainClass'] += ' video-frame';
                } else {
                    $args['mainClass'] += ' standard-frame';
                }
                if(ThemifyGallery.isInIframe()) {
                    window.parent.jQuery.magnificPopup.open($args);
                } else {
                    $.magnificPopup.open($args);
                    $(window).trigger('resize');
                }
            });

我确实添加了$(window).trigger('resize');，效果很好！我只需要在我自己的 scripts.js 中实现它，这样它就不会有一天被覆盖。

再次感谢，

迈克

Content not sizing to modal window until browser window resize

Answer 1

如果 window resize 事件可以解决您的问题，那么您可以在通过以下方式（在 jQuery 中）显示您的模态表单后简单地触发该事件：

 $(window).trigger('resize');

进一步调试需要您的实际 HTML 标记和 JS 代码。