Question

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

以下是我所面临的截图。照片的顶部是当我点击链接打开模态＆amp;时出现的内容。底部选择是我调整窗口大小后发生的事情（这是我之后的事情）。

这是点击事件代码。

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

如果窗口resize事件可以解决您的问题，那么您可以在显示模态窗体之后（在jQuery中）简单地触发事件：

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

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

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

1 个答案: