A site that uses pop ups is like a vacuum cleaner salesman that comes to your house and pours a sack of dirt on your carpet to demo his product without being asked. Rude as Hell. I will not buy products from any site that uses pop-ups. That’s the main reason I refuse to use Netflix - they go out of their way to exploit glitches in browsers to get pop-ups to work. I know I’m not the only user that closes the whole page when it fires an unwanted pop-up.
About the only use I have for popups is for file uploads since AJAX doesn’t allow file transfer (yet). Even that I do rarely.
Sounds like your goals would be best served with a modal window. Depending on the amount of content that will be displayed in the modal you could really go one of two ways.
The first would be to use the :target pseudo selector to hide and show the modal. The disadvantages of that will be that for every item that has a modal its modal content will need to be served on the same page. Depending on the amount of information in each modal that could be a significant amount of information to load per seach item. The other downfall is that a JavaScript work around will be required in IE6 as it does not support the :target pseudo selector. The advantages though are that it is probably a simpler solution and more directly accessible to all users without additional work arounds.
The second solution will be to use JavaScript to load the information via AJAX and replace content in a single modal window when items are clicked. The primary advantage here is that the browser will not need to load information that may not be seen, perhaps significantly reducing page weight depending on the amount of extra content. Though the big disadvantage would be an alternative work around will be needed for users with JavaScript disabled but it could be as simple as open the information in a new page. So users with JavaScript enabled would have the nice, modal experience where those without it enabled would get a new page.
I myself would probably go with second method since its more flexible then using CSS :target. Modals increase the user experience ten fold when used in right situations properly (ie. without ads).
I don’t really know what that means but since the OP asked for a solution and not for your opinion on pop-ups, I’m wondering if you’re talking about yourself?
Ever think there might be a REASON for that? It’s like the people who use/abuse TARGET – then when told not to go and replicate it’s functionality with scripting without thinking “maybe there’s a REASON it’s deprecated and people keep telling me not to do it?”
Kinda like smoking, alcohol or drug use – it’s bad for you, it makes you look and act like a dumbass, it destroys lives from an economic standpoint – EVERYONE except your die hard stoners who’ve already fried their brains to mush knows it – and there are still people who do it every single day of their lives. Not to use my soapbox to turn this into a tolerance lecture…
Basically, some people always have to make bad decisions no matter how many times they’re warned off from it. If they didn’t, your various “stupid people doing stupid things” video websites would go out of business.
That said, it really depends on the content and how accessibility would be handled – as said it almost sounds more like you want a lightbox than an actual window. Four years ago I was playing with making popups using some fairly lean .js
Code hasn’t aged well, but it might be a decent starting point depending on what it is you’re trying to do. The big trick would be that if scripting is disabled, you just show the elements on the screen as part of the page.
Really though we’d have to see the content of the popup and the page it’s being linked/displayed/popped up over to truly say what the best approach would be – without that we’re all guessing wildly.
Sometimes the answer to a question is “You’re asking the wrong question”. Part of the reason SPF is successful is because we always try to give people more than they asked for. They ask us how to do something, and we show them a better way of achieving their goal. Pop-ups suck. No-one who knows anything at all about web design and usability will deny that. And that has been the case for years, it isn’t a recent development. No-one who knows anything about 21st century web design and usability would countenance using pop-ups. Unfortunately, we do get a lot of people calling in here who are using very outmoded design methods, and we earn our reputation by setting them on the right path.
If the question is phrased along the lines of “Look, I know pop-ups are a really stupid idea, and I know there are all sorts of accessibility and usability problems, not least of which is the vast array of blockers and the issue of tabs and all that, but despite that, I really need a way to get pop-up windows”, then and only then is the right answer to tell them how to generate pop-up windows. For any other formulation of the question, the answer is “Don’t use pop-ups”.
Quote for truth. Truth often hurts… and many times the answer should be … well, it’s the old joke:
“Doctor, Doctor! It hurts when I do this!”
Someone asks how to shoot themselves in the head with a crossbow – you could tell them exactly how to pull it off; or you could ask what’s wrong and try to get them some REAL help.
Looks interesting, ds60. Out of interest, tried tabbing to those popups but wasn’t able to. Is there a way to keyboard access those popups, or is there a way at all to make popups accessible? Maybe it’s a job for aria roles etc.
Well, as I said it hasn’t aged well – and was more meant for content you would NOT keyboard navigate too… though I’d consider making the close boxes anchors so that you can at least get to those via keyboard.
Really needs a rewrite as it was more of a “how quick can I show how to move a DIV like it was a window” than a practical code for deployment. As I said, might be a good base for someone else to take and run with.
<script>
<!--
function modelesswin(url,mwidth,mheight){
if (document.all&&window.print) //if ie5
eval('window.showModelessDialog(url,"","help:0;dialogWidth:'+mwidth+'px;dialogHeight:'+mheight+'px")')
else
eval('window.open(url,"","width='+mwidth+'px,height='+mheight+'px")')
}
//configure URL and window dimensions (width/height)
modelesswin("http://yahoo.com",500,378)
// -->
</script>
<body>...
<a href="javascript:modelesswin('http://yahoo.com',500,378);">Click here</a>
</body>
It work now in any browser (IE9, Chrome and FF)
But now I got problem that popup window load on every refreshing of page! I don’t want that. I want to modeless window popup when user click on my flash banner!
What to change/add in code to make my popup “listen me!”?
Why window popups on every refreshing of page?
What part of code above making that?
I wouldn’t call that modern - more like prehistoric.
You have the script wrapped inside <!-- –> to hide it from people using Internet Explorer TWO and Netscape ONE and browsers that were around prior to the release of IE3.
You have href="javascript: which isn’t even proper JavaScript and which can easily break in ANY browser since JavaScript doesn’t belong there. You could at least move the code into a stone age onclick= instead.
If you want to modernise that script into the 20th century you would stop hiding it from browsers no one uses any more and swap it to use event listeners for attaching the JavaScript. To be slightly more modern you’d delete all the references to JavaScript out of the HTML except for a single script tag just before the </body> tag and use JavaScript to attach the JavaScript to whatever it needs to be attached to.
IE2 is hardly one of the latest browsers so why cater for it with the script. This thread is supposed to be about how to write code for modern browsers so suggesting code that uses obsolete and invalid code is hardly an appropriate response.
As for eval - well eval is just evil and should never have been a part of JavaScript in the first place. It has NEVER ever been needed and is just a HUMONGOUS security hole.
eval has it’s place and most all interpreted languages support the statement. Tell me how you would do this without eval…
__parseXMLResponse: function ( r ) {
var html = this.getXMLValue(r, 'h');
var js = this.getXMLValue(r, 'j');
if (js) {
eval (js);
}
},
The function in question is a callback to resolve a server response to an Ajax request. That response comes in the form of an xml file with two elements - The html to insert and the javascript to execute. The received javascript has to be passed through eval in order to resolve - there’s no other way (other than to compose a file with code for every possible server response which is, at best, clumsy).
This structure allows one javascript function to handle the initiation of most requests to the server I use. The exact details of the response are chosen by the server depending on the outcome of the request. It allows the javascript control logic to reside alongside the relevant php control logic.
eval gets abused a lot in every language where it exists. I won’t deny that. And it is important to be security conscious when using it (though this applies more to PHP eval calls than JS calls since the former take place on your server putting it at risk). But that doesn’t mean it shouldn’t ever be used nor does it mean that it shouldn’t be part of the language.
You guys gave me bunch of examples how to resolve my problem but I found myself overloaded with info. I now go to jquery (of which I aware badly) and cant find right solution for me it’s too much "galleries, boxes which just look nice and doing nothing, badly designed galleries too, user experience “disasters” etc. Jquery requires at least 5 css files which sux if you ask me. Very uncomfortable technique for files structure and folder trees!
I need:
something to open new window on web page by user on his click!
to can click around on any part of web page and drag window where ever user want!
to can close window on “X”
to can put everything in that window (HTML , flash, video etc)
to not load on every single reloading-refreshing of webpage
to work in any browser
I need 1 solution! Not thousands please.
I need simple implementation in existing HTML pages
I wanna simple folder tree on my website hosting place (not need more than 1 file of js or css or html per “web item, a web page”)
I prefer “bare bone” solutions for “bare bone” systems, in this case my website. So lighter and easier and stable solution would work for me. I asked 1st in my topic creation post something in plain HTML but you guys came with “modern” solutions which making me mess in my files and folder tree.
Please try post more simple and effective solutions. Universal ones, cross browser and stable if it’s possible.
PS… I’m think I’m starting to hate lightbox “everything blocking behind” solutions!
Declared to be no longer a part of HTML back in 1997 when HTML4 was released. Fortunately very easy to turn off in browsers so as to ensure that absolutely everything always opens in the same tab unless the person viewing the page tells it to open somewhere else.
If you are going to use popups of any sort then don’t forget to use blink on 3/4 of the content and to wrap 3/4 of the content in a marquee. If you are trying to annoy someone you may as well go all out to make sure that you annoy absolutely everyone and not just 99%.
EDIT:
This works only in FF like I want to work… in IE9 and Chrome it opens in next tab!
I’ll think I’m forced to use “new page” solution… but I’m soon will need something for poping up with few pictures on each picture link so I still need solution for other part of my website. Some clean solution for few pictures in popup window. Idk this sux. sorry. I appreciate your help ppl. Thank you for your help all of you!
