Create pop-up page

Post

Posted
Rating:
#3258 (In Topic #606)
Guest user
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
Back to the top

Post

Posted
Rating:
#3259
Guest user
Sorry the system omitted my tag.

So I assume theres an iframe tag somewhere?***
Back to the top

Post

Posted
Rating:
#3260
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
The JS open_link_in_overlay function IIRC.

These are Composr "overlays".


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: Yes Back to the top

Post

Posted
Rating:
#3283
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’
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.action:ob.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?
Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Chris Graham)
#3292
Avatar
Standard member
Jason Verhagen is in the usergroup ‘Community saint’
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.

Regards,
Jason


My ocPortal Sites: Holleywood Studio / Tech Fusion Online
My Composr Sites: NEWBotics Labs
Online now: No Back to the top

Post

Posted
Rating:
#3303
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
Quickly to clarify - yes any Tempcode works within Comcode, so long as it was posted by an admin.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: Yes Back to the top

Post

Posted
Rating:
#3304
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’

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.action:ob.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?

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.

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.action:ob.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?

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.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: Yes Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

Vaiva, John Connor, Manu, Chris Graham, amit.nigam, Paul D, babu, Salman

Forum statistics:
  • 1,071 topics, 5,166 posts, 6,018 members
  • Our newest member is graffitienz
Birthdays:
Back to Top