HTML popup code for latest browsers?

I need solution, a code of java script or anything good in HTML to can make popup HTML browser window with my custom size and centered position on PC screen to work in newest Chrome, IE9 and Firefox on user’s click on small flash banner.

I looked on internet but didn’t found solution.

For now I only found some popup code online generators and that worked fine till now next gen of browsers came with strict anti popup security politic.

Need help!

My site is plain HTML 5 with some js and some flash. I like clean HTML with little other dynamic content and techniques so I would like some nice and clean solution for my problem.

Of course …I don’t wanna to force my site visitors to check or uncheck options in their browsers! I wanna find solution without going to specific browser options! All DEFAULT DEFAULT DEFAULT I need!

Pop-ups aren’t used much anymore and are typically blocked by pop-up blockers.

What are you trying to display? In most cases, a lightbox solution might be more appropriate.

I got on my site some reduced price offer of my client services and on popup HTML browser window I wanna put contact info of company and some text more abt that offer. Nothing aggressive or against web moral rules, nothing forbidden or against the law.

I also wanna other parts of my website to be always accessible by visitor. I don’t wanna popup which need to be turned off to visitor can access other parts on web page. I just need simple HTML browser popup and completely legal solution following latest browsers and web standards.

AFAIK all the “box” flavors do require closing before navigation can resume.

IMHO you should let go of the “pop-up” idea and go with inserting the content into the DOM

While you seem to be trying to stress the legality of using pop-ups, that’s not really the issue. The main issue is that they’re annoying to visitors.

Like Mittineague says, that information might be best placed on the page itself. Possibly as a banner or side banner if you don’t want it with the main content.

You could do a CSS ligtbox or a js one (like fancybox). Seen here

I agree, and Eric’s come up with a snazzy one. 90% of your viewers won’t see your pop-up, and the ones who do will be annoyed by it.

There’s also this CSS-only alert box that I cribbed from somewhere but didn’t keep track of the source :frowning: that you might try. It displays a small, configurable “alert box” that displays a larger info box on mouseover. Really more of a fancy tooltip.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Alert Box</title>
<style type="text/css">

#alertwrap {
	width:350px;
	margin:0 auto;
	padding-bottom:10px;
	background:#1565c1;
	border:1px solid #000;
	text-align: center;
}

#alertwrap h2 {
	text-align:center; 
	background:#1565c1;
	color: #fff;
}

#alertwrap p.tooltip {
	position:relative;
	padding-top:0;
	text-align:center;
	background:#fff;
	font-weight: 700;
}

#alertwrap p.tooltip a {
	color: #c75300;
	text-decoration:none;
}

* html p.tooltip, 
* html p.tooltip a:hover {
	display:inline-block;
}

#alertwrap p.tooltip a span {
	position:absolute;
	width:300px;
	top:-50px;
	left:20%;
	margin-left:-62px;
	padding:15px;
	visibility:hidden;
	background:#fff;
	border:2px solid #c75300;
	color:#1565c1;
	font-size:.9em;
}

#alertwrap p.tooltip a:hover span {
	visibility:visible;
}

</style>
</head>
<body>

<div id="alertwrap">
    <h2>Headline</h2>
    <p class="tooltip"><a href="contact.html" title="contact link">More information &hellip;<span>Info displayed on rollover. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></a></p>
</div>

</body>
</html>

I think you all guys not understand me. This popup it’s not annoying cause it activates on mouse click. To make you clear I’ll give you my client site and how that look. It can be viewed atm only in firefox with default settings latest FF release. My FF is 6.0.1

?EVA-Po?etna strana

Look that flash in firefox and click on it! It shows popup which is very cool, user can click anywhere on site around, not blocked and annoyed as you all say. User can move to side that popup window or turn off my very friendly popup, can read what it writes there or not. Very user friendly and not annoying.

Solutions you gave me all blocking user from klicking around except on “X-Close button” which pretty sux if we look user positive experience of visiting some site.

And 1 thing more! I’m not “web trendy” guy. I mot going for trends than for quality and really good user experience. I’m not a coder… I’m more “designer for ppl” not for web trends.

One big problem that you’ll find is that increasingly, browsers are allowing users to open links (including pop-ups) in new tabs rather than new windows, and in anything other than Opera that means your pop-up will open as a full-size page rather than centred and at the size you’ve specified – that’s assuming it isn’t blocked, of course.

No! Wrong. I open new Chrome and new IE9 and nada! Wont popup in HTML browser window. Atm only work in Firefox. Very bad and since I started webdesign i see some thing which I not like! It’s abt web standards and HTML language but this topic is not abt that. I need simple HTML browser popup. Help!

The closest thing to a HTML browser popup is what I posted. I assume your looking for a js popup. Google it there are hundreds. Or I have one one my site. Or reword what you want because I am still not clear. Nor did I find any popups in the flash section.

Saying that and wanting to use popup windows is a contradiction.

At any rate, in order to help you, take a look at this page for a tutorial.

JavaScript Popup Windows

I got that “A Better Script” implemented in my pages already but since got new Chrome and IE9 they not showing that script with “var popupWindow = null;…etc” code.

For guy above which not see popoup window on my webiste flash banner on far right column, in FIREFOX, I suggest to maybe better read what I wrote so far to not repeating myself.

Saying that and wanting to use popup windows is a contradiction.
It’s not contradiction cause it’s not aggressive and annoying. It popups on click and it’s quite friendly, you can turn it off once for all times an dnot click it again! Ok now?

If you personally got something against popups then you prolly had bad experience with those but my browser doing his job good and i didnt had so much problems with popups in my life. If you don’t like popups like “Web designer” cause of some professional reason then I think it’s just your right to keep that as your personal attitude.

I like it in my project and it’s very useful.

For people which not see or can’t see my popup i made a screenshot here:mypopup

You figured me out. I clicked on a popup once and a gremlin hopped out of the screen and bit my big toe off. Now I can’t wear flip-flops.

The information you are seeking is widely available through a Google search and a little bit of work on your part.

Look my 1st post (topic created post!) I wrote that I checked Google already, implemented js popup code but new browsers not showing it except FF!

I’m asking here ppl from Sitepoint… cause I see this Sitepoint “network” is… I think… filled with experienced people and web developers so my search for solution will be quicker.

I also wanna point out this new browsers “feature” of blocking everything which is big fail in security giving world spammers 0:1 score for world spammers… if you asking me and when we talk abt HTML development and WC3 standards which all browsers should follow and interpretate right, blocking of every popup by latest browsers releases showing that developers of web browsers gave up on security from defense of unwanted popup windows.

I think this site-forum many good developers read and will find this problem and resolve it in some near future.

I just ask if there-here some guy which got maybe solution for new actual problem. That’s all I ask. I found old JS scripts abt this but THEY NOT WORK ANYMORE!

I need new solution, some part of code or new latest browsers updates with new patches!

Some ppl here posted some galleries and lightbox solutions but they not giving to web site visitor full freedom like simple plain HTML popup.
maybe if I had lightbox solution to not block whole screen and allowing to user move that popup window. That would be cool then if latest browsers allowing that ofc.

The problem is that the technique has been largely abandoned. It’s annoying to users, and modern browsers don’t always handle it properly or even display it at all.

The lightbox solutions which some of the folks mentioned are generally more acceptable to use and work better with modern browsers.

use this code

<script language="javascript">
window.open('http://your site.com ','','width=350,height=200')
</script>

put the code in body not head. it works with chrome and ie.

I don’t think it’s a matter of not knowing how to code a popup, it’s the UX issue. SP’s Ian Lloyd wrote about it in 2002, and his arguments against the popup are even more valid now than they were then. In that article, he suggests a version that is a bit better, but nowadays popups have been almost entirely superseded except in very particular circumstances. The consensus is, I think, not to use the damn things.

Here Accessible Pop-up Window

I think you can safely go the way of using lightbox variations! As they are widely spread and used! -You need to choose a good one though-

We had a similar discussion about this matter in my company to decide what solution we should ‘standardly’ implement for the small and medium web projects we develop!
We created our own lightbox variation and we’re using it efficiently during the last couple of months!
Here are some articles and resources that helped us build a Usable, practical and accessible box: