直到瀏覽器窗口調整大小，才調整到模態窗口內容

我試圖將動態內容置於模態（彈出）中，但它們沒有正確調整大小。但是，如果我打開彈出窗口並調整我的瀏覽器窗口大小，它們會啓動到位。內容顯然是在打開模式之前對隱藏的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

來源

2016-01-15 macmike78

如果窗口resize事件能夠解決您的問題，那麼你可以簡單地觸發事件，你這個（jQuery中）顯示您的模式窗體後：

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

進一步的調試需要您的實際HTML標記和JS代碼。

來源

2016-01-15 23:29:10

謝謝零點！頁面[鏈接]（http://inkgds.ca/dev/themify-stonehammer-4/experience-provider/daytripping-outdoor-adventures/）。該模式由功能活動按鈕在頁面下半部分加載。根據我的研究，我將其縮小到您提供的相同的觸發調整大小代碼。我想我迷失在哪裏以及如何稱呼它。我的目標是什麼id/class？我可以使用其他函數將代碼放入我的scripts.js中嗎？很確定它使用Magnific Popup。再次感謝！ – macmike78

@ macmike78：我想你會在按鈕點擊或JS文件中顯示你的模態表單。我查看了鏈接，找到觸發模式表單的點擊事件需要一些時間。繼續，找到一段代碼並將其添加到您的問題。但這是它在大多數情況下的工作方式，例如Bootstrap模態窗體。您會發現該單擊事件，並在事件結束時添加這一行代碼，此時已顯示模式窗體。 –

幾乎在那裏！我發現了點擊事件。問題是，我需要掛鉤它（在我自己的scripts.js中覆蓋它，因爲這一個可能會被覆蓋）。你能從代碼中知道我是否可以調用該函數？我確實將代碼添加到了底部，因爲您可以看到它並且工作正常。正如我所說，我不能將它留在那裏。謝謝！ – macmike78

直到瀏覽器窗口調整大小，才調整到模態窗口內容

回答

相關問題