General Question

DrewJ's avatar

How do I add a nice looking simple popup message on the homepage of my website?

Asked by DrewJ (436points) January 22nd, 2011

I had a developer create a website for me and I want to add a popup message. I know where the code should go, I just don’t know the code. I want the popup to display within the browser window the website is viewed in, not in a new window. Examples of what I’m looking for:

1 ) go the this address and click “login” in the top right. http://listen.grooveshark.com/#/

See how how the popup displays within the browser and the user can click it away? This example is a login box, mine just needs to be a message. Also, I need it to show automatically. Also, I understand how to create a popup that shows hrough the browser’s generic popup “shower” (i guess that’s what yu would call it) I need my popup message to show a little nicer like in the example.

Observing members: 0 Composing members: 0

4 Answers

poisonedantidote's avatar

This is something called a popup div, the div part is a refference to div tags. Basically, popups used to show up in seperate windows, but everyone has popup blockers now days so people are using divs instead, and plus it looks a little nicer than a traditional popup.

This link should have the code you need. It may not be tailor made, but im sure you can alter it to suit your purpose.

In case you don’t like the example in my previous link, here is a link to more code for another box.

funkdaddy's avatar

Sometimes these are called modal boxes, the easiest way to get one going on your site would be with a javascript library and a plugin.

Your developer may already be using a library with the web site, if so then there’s no reason to load another just for this sort of feature. If you see a script tag (<script>) in the page code referring to jQuery, prototype, mooTools, or YUI then you’ll want to look for a plugin using that library. There’s quite a few others, but those would probably be the most popular and more likely.

Then go to google and type in ”<library> modal plugin” and you should get some good options you can go through and find one with good documentation and defaults you won’t have to change much to fit in.

If you don’t have anything already, personally I like jQuery and thickbox for a variety of uses.

This may not be the ideal way to go, depending on a number of other variables, but it is one of the easiest.

Vincentt's avatar

Also, to think twice whether you really need a pop-up. They really disturb an experience, so only use them if you really want the user to stop everything else he is doing right away just to read the message. For example, I think Grooveshark’s use of it is really bad, a much better way would be for the user to be able to enter his login credentials at a time that suits him directly on the page, without the form covering other content (e.g. like it’s done over at Kongregate).

acuares's avatar

Simple pop ups can be made using javascript.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther