This demo works for HTTP and HTTPS. You are on HTTPS right now Please click here to get to the HTTP version.
This example show the “Show the iframe as layer/popup with opens automatically” feature which only available in the pro version of the advanced iframe. See the main “Show the iframe as layer/popup” for more examples.
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 58: Open the iframe automatically when the page is loaded.
You can open the iframes in a popup in 2 ways:- Add |autoclick to the “Change parent links target” setting after the selector you like to open. The selector has to be the last (!) one! If your selector is very general like “a” then the first one is used. In this case add a 2nd selector which is more specific. Like a,a#id-of-the-link|autoclick .
- Add an id to the link you like to open as anchor/hash and define it at change_parent_links_target. So if you set id=”linkToOpen” to the link and change_parent_links_target=”a#linkToOpen” then adding #linkToOpen to the URL of the parent will open the popup. Only selectors like id or classes are possible which identify the link directly. If you have multiple hits the first one is opened.
Additional settings
- Auto click delay: The delay in ms the iframe is opened when auto click is enabled. Shortcode attribute: show_iframe_as_layer_autoclick_delay=””.
- Auto click hide time: Defines the number of days auto click is disabled after opened once. If you set the value to 0 then the iframe is opened every time. You can define the time in days the iframe is not opened. 1= one day. 365= one year. This info is stored in a cookie starting with ai_disable_autoclick_iframe with the expiration time you define. Shortcode attribute: show_iframe_as_layer_autoclick_hide_time=””.
Demo links
- This link is the one opened automatically. It shows the demo overview page. It has the id=”auto-link”. You can click it again after closing the popup. If you don’t like to have this link visible hide it by css.
- This 2nd link is the one you can open with the hash! It shows the quick start guide. It has the id=”auto-hash”. The link to open it this way is //www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-open-layer-popup#auto-hash This link is opened in a new tab because as we are already on the correct page the browser will not do anything otherwise! This demo has both options configured at the same time (which you normally don’t have) so if you delete the cookies AND click on the link with #autohash both popups are triggered and the 2nd one will overwrite the 1st one!