Link column to full screen pop-up / iframe

Hi,
This popup image shows the popup with only one line of text so it is naturally small, I believe you will find that the popup will grow with more content, to a point, but to make it 100% will require more css adjustments, are you sure you really want a 100% popup? The example page you linked to with this was a little confusing from a UX standpoint, in my option. Might I suggest a 90% popup with the opacity background because it is a more familiar UX?

Anyways… in different examples that I have worked on I find that iframes can be much slower on popup load where the method I point to is very fast, because the content is already loaded.
If you really want to use the iframe solution I was able to create a page that would be the “popup” with a grid row element and such,

this is the Avia Layout Builder Debugger code:

[av_layout_row border='' min_height_percent='' min_height='400px' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' av_uid='av-c6pja3']

[av_cell_one_half vertical_align='middle' padding='130px' padding_sync='true' background_color='' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2015/07/business-support-1.jpg' attachment='582' attachment_size='full' background_attachment='scroll' background_position='top center' background_repeat='stretch' mobile_display='' av_uid='av-10qarv']

[/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='30px' padding_sync='true' background_color='#f8f8f8' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' mobile_display='' av_uid='av-8qt0kr']

[av_heading tag='h2' padding='0' heading='Our Support Team' color='' style='blockquote modern-quote modern-centered' custom_font='' size='30' subheading_active='subheading_below' subheading_size='15' custom_class='' admin_preview_bg='' av_uid='av-t3b2z']
Customer Satisfaction
[/av_heading]

[av_hr class='custom' icon_select='no' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='50' custom_border='av-border-fat' custom_width='50px' custom_margin_top='150px' custom_margin_bottom='150px' custom_border_color='#000000' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-5uoavf' sc_version='1.0' admin_preview_bg='']

[av_textblock size='' font_color='' color='' admin_preview_bg='' av_uid='av-f9ep7']
<p style="text-align: center;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
[/av_textblock]

[av_hr class='custom' icon_select='no' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='50' custom_border='av-border-fat' custom_width='50px' custom_margin_top='155px' custom_margin_bottom='155px' custom_border_color='#000000' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-kmte5zf0' sc_version='1.0' admin_preview_bg='']

[av_font_icon icon='ue8f1' font='entypo-fontello' style='' caption='' link='manually,http://twitter.com' linktarget='_blank' size='20px' position='center' color='' admin_preview_bg='' av_uid='av-1yhd23'][/av_font_icon]

[/av_cell_one_half][/av_layout_row]

with no header, sidebar, title bar, or footer
Then I used this link in a button http://test.test/popup-test?iframe=true

and then I used this css to make the popup 100vh & 100vw:

.mfp-container,
.mfp-iframe-holder .mfp-content,
.mfp-iframe-holder .mfp-iframe {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
}

and it worked, but I also lost the ability to close the popup, try using the above css as your base and see if you can adjust to allow to close the popup, I would recommend making the popup 90vh & 90vw 🙂🚀

Best regards,
Mike

Hi,
I would like to point out that the page you are trying to copy is not using iframes, iframes load a page source from another url, or page. The popups you are seeing are embedded in the current page source in the div’s with the class member-bio
Please review the page source code and you will see this is similar to my suggestion above with using a code block element for your popups, this is why it seems to load instantly. An iframe will load slower because it must call another url and load that page.
The other issues you question have to do with our built-in popup javascript which is naturally not the same as the page you are trying to copy. So while you can create a similar page and effect with the Enfold options and elements, having an exact copy of that page would require you to use the same javascript and source code as that page.
Are you rebuilding this site for this customer or are you modeling it for another?
Are you looking for exact or similar?

Best regards,
Mike

Hi,
To achieve the exact function of that page team section you would need to use the same css, javascript, and html structure, this could then be added to a code block section in your page. While this is a cool effect I can’t justify the time to scrape this code and reformat it in a clean matter for you as it is not really an Enfold task. You would basically right-click and save as the page to your desktop and then clean up the css, javascript, and html, but if you don’t feel comfortable doing this you could hire someone to do it for you in a few hours for pretty cheap money, UpWork.com or Fiverr.com might be a good place to look.
The debugger code and example links above to achieve a similar effect in Enfold also work as described, but they are similar not exact.

Best regards,
Mike

Hi,
Very good we will go ahead and close this then, for your information through, column links are actually “fake” and are simulated within Enfold, the URL is actually added in a separate link element inside the column.

Best regards,
Mike