Show the iframe as layer/popup

This demo works for HTTP and HTTPS. You are on HTTPS right now Please click here to get to the HTTP version.

This examples show the "Show the iframe as layer" feature which only available in the pro version of the advanced iframe.

The examples below show the feature that links on the parent page are not opened in the same page or a new tab but on an extra layer like a lightbox. So your user does not leave your page anymore! Also since version 6.6 it is possible to add an additional header/footer and that the layer is 100%.

This feature does work for any remote domain that can be included into an iframe. Show part of iframe, lazy load, hide part of iframe and iframe loader are disabled as they do not work with this feature.

Please check the links you use! Some text editors do add some additional classes like 'noopener' which sometimes cause that the links do open in a new window instead of the iframe. e.g. TinyMCE Advanced does add this IF you select "Open in a new window"

To make it easier to copy/paste the examples most examples are fully configured in the shortcode directly. I use use_shortcode_attributes_only="true" that none of the settings from the administration are used.

Example 34: Change link targets and show the iframe as layer

This example shows the feature that links on the parent page are not opened in the same page or a new tab but on an extra layer like a lightbox. So your user does not leave your page anymore!

The following 2 links have both set href="//www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo" and target="_blank" in the code. Link1 has the id="linklayer1" and link2 has the id="linklayer2". This example does modify link 2 that the content is not opened in a new tab but in a layer.

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="about:blank" id="example32" id="example34" height="1000" width="900" change_parent_links_target="a#linklayer2" show_iframe_as_layer="true" enable_ios_mobile_scolling="true"]

Example 37: Change link targets and show the iframe as layer with additional header

This example is like example 34 but with an additional custom header in the layer. The header is stored in an additional file and for each iframe a different file can be specified.

This example shows the feature that links on the parent page are not opened in the same page or a new tab but on an extra layer like a lightbox. So your user does not leave your page anymore!

The following 2 links have both set href="//www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo" and target="_blank" in the code. Link1 has the id="linklayer3" and link2 has the id="linklayer4". This example does modify link 2 that the content is not opened in a new tab but in a layer.


And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="about:blank" id="example37" height="1000" width="900" change_parent_links_target="a#linklayer4" show_iframe_as_layer="true" enable_ios_mobile_scolling="true" show_iframe_as_layer_header_file="xxx"]

Example 38: Change link targets and show the iframe as 100% layer with additional footer

This example is like example 37 but the header is on the bottom, has a size of 150 px only and size of the layer is 100% instead of 96%.

Link - that opens in an iframe in a 100% layer with a footer.


And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="about:blank" id="example38" height="1000" width="900" change_parent_links_target="a#linklayer5" show_iframe_as_layer="true" enable_ios_mobile_scolling="true" show_iframe_as_layer_header_file="footer" show_iframe_as_layer_header_height="150" show_iframe_as_layer_header_position="bottom" show_iframe_as_layer_full="true"]

Example 54: Change link targets and show the iframe in the original size with additional footer

This example is like example 38 but the iframe is shown in the original size of the iframe. If the browser is smaller than the iframe a max. of 96% is used.

Link - that opens in an iframe the original size layer with a footer.


And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="about:blank" id="example54" height="1000" width="700" change_parent_links_target="a#linklayer6" show_iframe_as_layer="true" enable_ios_mobile_scolling="true" show_iframe_as_layer_header_file="footer" show_iframe_as_layer_header_height="200" show_iframe_as_layer_header_position="bottom" show_iframe_as_layer_full="original" show_iframe_loader="true"]

Example 54a: Change link targets and show the iframe in the original size with additional footer + modify the iframe

This example is like example 38 but the iframe is shown in the original size of the iframe. If the browser is smaller than the iframe a max. of 96% is used. Also the header is hidden inside the iframe as this is on the same domain. Also the iframe is unloaded after closing by setting show_iframe_as_layer_keep_content="false"

Link - that opens in an iframe the original size layer with a footer and remove the header.


And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="about:blank" id="example54a" height="1000" width="700" change_parent_links_target="a#linklayer6a" show_iframe_as_layer="true" enable_ios_mobile_scolling="true" show_iframe_as_layer_header_file="footer" show_iframe_as_layer_header_height="200" show_iframe_as_layer_header_position="bottom" show_iframe_as_layer_full="original" iframe_hide_elements="header" show_iframe_loader="true" show_iframe_as_layer_keep_content="false"]

This feature does work for any remote domain also with can be included into an iframe. Show part of iframe, lazy load, hide part of iframe and iframe loader are disabled as they do not work with this feature.

Have fun using Advanced iFrame Pro,

Michael