Create pop-up page

You know how when you click on links in your Composr footer, like 'Login' for example and a pop-up appears?

How can I implement a popup to appear when they visit :mypage?

I'm basically making it so when a user visits my site, the first thing they get is the popup (used to request their email address), and once they click a link in the popup, it directs them to another zone and page.

I noticed with the login popup, I can right click a view the frame. It appears to be just a normal page of its own. So I assume there's an <span> somewhere? It also adds a &wide_high=1&overlay=1 to make the logo and footer disappear, giving the popup a more dynamic feel.

Any input is appreciated.

Thanks so much!

• Joe

Sorry the system omitted my tag.

So I assume theres an iframe tag somewhere?***

The JS open_link_in_overlay function IIRC.

These are Composr "overlays".

function open_link_as_overlay(ob,width,height,target)
{
   
      if ((typeof width=='undefined') || (!width)) var width='800';
      if ((typeof height=='undefined') || (!height)) var height='auto';
      var url=(typeof ob.href=='undefined')?ob.actionb.href;
      if (/:\/\/(.[^\/]+)/.exec(url)[1]!=window.location.hostname) return true; // Cannot overlay, different domain
      if ((typeof target=='undefined') || (!target)) var target='_top';
      var url_stripped=url.replace(/#.*/,'');
      var new_url=url_stripped+((url_stripped.indexOf('?')==-1)?'?':'&')+'wide_high=1'+url.replace(/^[^\#]+/,'');
      faux_open(new_url,null,'width='+width+';height='+height,target);
      return false;
   

   
      return true;
   
}
window.onload = open_link_as_overlay;

I don't know anything about Javascript, but if I wanted to call a specific page for the window.onload event, how can I edit this JS snippet to include the URL of the page I want to popup?

Could you use the [overlay] comcode tag on your :mypage? If you want to include another completely different page within the overlay, you could use the $LOAD_PAGE tempcode within the overlay comcode tag to include the other page. I did a quick test and it worked, but I also ran into a couple quirks. I didn't figure out how to get the overlay to add scroll bars if the included page was larger than the defined size of the overlay. Maybe because I only tested it in a Preview and not in an actual page that was saved? Also, it appears some (or possibly all) tempcode (like {$SITE_NAME}) used by the included page may not be processed. Again, possibly because it was viewed in a Preview and not viewed from an actual page that was saved?

Just some quick instructions if you want to give it a try…

Edit the comcode page you want the overlay to appear on. Then use the comcode tag assistant in the editor and select the overlay comcode tag in the assistant. For the overlay comcode tag, set the Tag Contents parameter to be the text you want displayed. If you want it to include a page called :mypage_overlay from the site zone, then use {$LOAD_PAGE,mypage_overlay,site} for the Tag Contents. Set the other parameters as needed. The overlay comcode tag can be added anywhere within your page. The actual size and position of the overlay is dictated by the tag defaults or your specified size and position.

Quickly to clarify - yes any Tempcode works within Comcode, so long as it was posted by an admin.

Joe said

function open_link_as_overlay(ob,width,height,target)
{
   
      if ((typeof width=='undefined') || (!width)) var width='800';
      if ((typeof height=='undefined') || (!height)) var height='auto';
      var url=(typeof ob.href=='undefined')?ob.actionb.href;
      if (/:\/\/(.[^\/]+)/.exec(url)[1]!=window.location.hostname) return true; // Cannot overlay, different domain
      if ((typeof target=='undefined') || (!target)) var target='_top';
      var url_stripped=url.replace(/#.*/,'');
      var new_url=url_stripped+((url_stripped.indexOf('?')==-1)?'?':'&')+'wide_high=1'+url.replace(/^[^\#]+/,'');
      faux_open(new_url,null,'width='+width+';height='+height,target);
      return false;
   

   
      return true;
   
}
window.onload = open_link_as_overlay;

I don't know anything about Javascript, but if I wanted to call a specific page for the window.onload event, how can I edit this JS snippet to include the URL of the page I want to popup?

From “Post #3,283”, 18th October 2017, 2:14 am

Jason's post says basically what I'd have said, use the Comcode overlay tag .

It's a different overlay implementation to open_link_as_overlay. Some JS code could be written to use the same overlays as open_link_as_overlay (our main overlay system), but that'd require programming and is excessive (because no iframe is needed for this, just a "CSS layer" is enough, and that's what the Comcode overlay tag does). open_link_as_overlay itself only works for link clicks, and is very simple when used for that - just look at the HTML for one of the links that open in overlays to see how that works.