Popup a window, once per session

I need a script which will pop up a window, once per session. I know many codes will not work because the pupup blockers but still, I am looking for a code which has a higher working percentage. Can you suggest a code?

Thanks!

 

Hi Fracisc,
have you already take a look on this library?

http://fabien-d.github.io/alertify.js/

Hope this help.
Bye ;-)

 

Dynamicdrive has drop in and pop up box scripts that you may want to look into. They're usually highly customizable:

http://www.dynamicdrive.com/dynamicindex17/dropinbox.htm

http://www.dynamicdrive.com/dynamicindex17/amazondrop.htm

http://www.dynamicdrive.com/dynamicindex17/stickynote.htm

 

Make it a DIV server-side with an anchor inside it to 'close' it via reload (so you have scripting off graceful degradation) -- use CSS to z-index it and position:absolute (or fixed) it over the content -- then enhance it with javascript hooking onto that 'close' anchor to remove the DIV from the DOM or class swap to hide it.

Not a popup blocker in the world could stop it, because it wouldn't be a real "popup"; it's just another DIV in the content. Bonus points, it would work without scripting because again, if you can't make a page that works without scripting FIRST, you probably have no business adding scripting to it.

 

Just to show what I mean:

<?php
session_start();
if (!isset($_SESSION['accesses'])) {
  $_SESSION['accesses'] = 0;
  echo '
		<div id="popup">
			This would be your Popup<br />
			<a href="', $_SERVER['PHP_SELF'], '" id="popupClose">Close</a>
		</div>';
} else $_SESSION['accesses']++;
?>

Code (markup):

With this for the scripting (run this right before </body> or at onload -- I prefer the former.)

(function(){
	var close = document.getElementById('popupClose');
	close.onclick = function(e) {
		var popup = document.getElementById('popup');
		popup.parentNode.removeChild(popup);
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
		if (e.preventDefault) e.preventDefault();
		e.returnValue = false;
	}
})();

Code (markup):

Nice anonymous function to prevent other scripts from interfering, actually deletes the element from the DOM freeing up some memory.

From there, you can style it with CSS and plug in your content however you like.

 

@deathshadow you know what would be cool? It would be cool if you could add a slow fade-in / fade-out option to it.

Any comments?

 

I wouldn't do the fade-in, usually that just makes things load slower - and inconsistently too. Opera (real Opera, aka 12.17 /lower) and IE both choke on that type of nonsense bad usually 'flashing' it showing first; and it ends up code-heavy as well. I've never seen a 'fade in' on a website that wasn't a train wreck of code or that worked properly.

The fade-out might be nice so long as it was quick -- could be done by simply switching from removing it from the DOM by hiding it; use opacity and CSS3 transitions for the fade, and a delayed left:-999em to remove it (so you can click on the stuff it would normally be 'over').

just add a 'hide' class to #popup instead of deleting it.

(function(){
	var close = document.getElementById('popupClose');
	close.onclick = function(e) {
		var popup = document.getElementById('popup');
		popup.className += (popup.className ? ' ' : '') + 'hide';
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
		if (e.preventDefault) e.preventDefault();
		e.returnValue = false;
	}
})();

Code (markup):

Then the CSS -- untested, but should work in modern browsers.

#popup {
	position:absolute;
	top:0;
	left:0;
	-webkit-transition:opacity 0.3s, left 0 0.3s;
	-moz-transition:opacity 0.3s, left 0 0.3s;
	transition:opacity 0.3s, left 0 0.3s;
}

#popup.hide {
	-moz-opacity:0;
	opacity:0;
	left:-999em;
	/*
		we don't need the IE filter since the left will hide it anyways and
		it's not like IE versions that use activeX filters do transitions
	*/
}

Code (markup):

Note the double numbers on the CSS3 transition. The first number is duration, the second is the delay before it starts doing the transition. Decent example of what I mean by jQuery's 'fadeIn' being archaic and outdated methodology... a lot of what people are still doing with jQuery's fatass code-base so far as animations can be done cleaner, smoother, and using less CPU (and therein less battery on mobile) using CSS3 now with a simple class swap.

 

For pure CSS, try something like this.
http://www.script-tutorials.com/css3-modal-popups/

I wouldn't suggest @deathshadow method because what it does is annoying your visitor and it was outdated trend:
http://sideproject.io/outdated-ux-patterns/

 

Which is a fine method in and of itself, if not for it not working at all IE9/lower since they don't know :target, and it being somewhat unreliable on forms since they can lose :target focus if you use labels properly... a laugh since their own example does that; I click on a label to focus it's input in "real" Opera or IE10, the "popup" disappears. I like that CSS3 method a lot, but it's not "real world deployable" yet.

If you don't give a flying purple fish about IE10/lower and people still using the REAL Opera (as opposed to the pathetic crippleware known as Chrome with the Opera logo slapped on it any old way), then sure, you could use that method. Unfortunately the reality is there are still WAY too many people who've not updated to 11 either because they can't (work crapplets leaving them stuck on old IE, legacy OS version that doesn't support 8/newer, etc) or just don't know any better.

The only thing on that page which might apply is "overlays" and that's what the OP is asking for AND what you posted links to; since modal popups are basically overlays... so... not sure what the devil you are even thinking on that.

Though I DO agree with that article you linked to; that's why I made functional non-scripting markup first. Most of what that article is really kvetching about is a bunch of techniques that have accessibility failings and no graceful degradation. I've been bitching about image rotators/sliders/carousels/whateverYouWantToCallThemThisWeek almost since they were introduced -- likewise for large background images that add nothing of value to sites but suck endless bandwidth just because some PSD jockey likes it. "Mega Menus" are little more than what used to be called "link overload"; where if you have too many links on a page it overloads the users senses to the point they can't find anything. Text as images has been a no-no pretty much from the first time someone did it... Overlays are a problem unless you provide all the things they point out are missing -- that's what the graceful degradation is there to fix. (which the code I provided does). Page Preloaders are crap, no arguments there -- and overdoing social integration is becoming one of the more annoying bits of bloat on sites... Content insertionals has to be one of the most annoying things you can come across as a user, more so when done in a manner you can't distinguish them from the content. Autoplaying media has been on every "how not to build a website" list since the dawn of media on websites... I hate 'infinite scrolling' sites that keep loading content; PARTICULARLY since (here's the REALLY annoying part) they suck memory and can crash even 64 bit desktop browsers with disk-thrashing if you want to scroll past a certain number of elements. I don't get what the **** is wrong with actually using pagination. The article calling it "infinite pagination" is stupid, since there is no pagination involved)

BUT -- I'm not getting what any of that has to do with my solution to the OP's problem -- since the only one that comes closes is 'overlay' -- and even if that did apply, what I posted is EXACTLY what they asked for. Showing a popup-type element the first time a session is used.

In fact, that CSS3 method you linked to wouldn't work since to open it, you have to focus it so :target fires, so unless you're going to redirect the pageload to #popup (or whatever you call the element) or use an onload script to target it -- that's just not going to work.

Though mine does have the flaw that scripting off you can't close it -- I missed that little detail. A class to make it absolute positioned over the content added by the script should probably go on that -- when scripting isn't present, show it inline at the top (or better, bottom) of the page as normal content.

(function(){
	var
		close = document.getElementById('popupClose'),
		popup = document.getElementById('popup');
	popup.className += (popup.className ? ' ' : '') + 'apo';
	close.onclick = function(e) {
		popup.className += (popup.className ? ' ' : '') + 'hide';
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
		if (e.preventDefault) e.preventDefault();
		e.returnValue = false;
	}
})();

Code (markup):

with the 'apo' class being used to switch it to absolute or fixed positioning instead of normal content display.

 

Impressive comment and wise coding (you don't forget to get rid of bubble). I'd apply this to my project too. Though I'm still thinking hard of the algorithm to get rid of the annoying part.

 

Well, to be honest this isn't something I'd do on one of my sites in the first place -- I was more focusing on how to do it than I was the ramifications of it being annoying to the user.