Personalize your page with interactive pop up windows

Initially, I was going to do my blog post on the roll over effect but, after seeing that a lot of other people did that, I decided to choose something else. So, after doing some more Googling I came across a cool, simple trick. I found that making pop up windows is surprisingly easy, and it can add a personalized feel to your website. For example, upon clicking on the link to go to your photo recovery story, you can add have a message pop up that says “You’re going to love this!” or “Good choice!” It just adds a human-like aspect to your website because of the quick interactions that are possible.

You’re going to want a pop up message to come up and perform the task at hand.

Screen Shot 2013-10-30 at 10.26.12 PM

In your css file, you’ll write:

Screen Shot 2013-10-30 at 10.12.30 PM

In your html code, you’ll make a div calling the class “message.” Within the body of the div, you’ll write the message that you’d like to be displayed in the pop up window. The code will look like this:
<div class=”message”> Get ready for the greatest web page ever! </div>

That’s all there is to it! I would suggest reading some other classmates tutorials in order to perfectly implement this. It could be cool to blur out the back when your message pops up, and then just insert a button at the bottom so the user can continue on. Both of these are explained in detail in previous posts, so I won’t go into detail about them. By knowing the basics behind adding an interactive pop up window, you can combine a bunch of techniques to add a really cool aspect to your webpage.

What’s nice about Dreamweaver is that there are a lot of different ways to make a popup message, so choose whichever makes the most sense to you! Another way to do it is to first highlight the text or image that you want to trigger the popup message when clicked on. This could be an option in your menu, or just a random component of your webpage. Go to the “Behaviors” window and click “+” then choose “Pop-up message.” This will show you a screen where you type in the message you want displayed, then click OK. Now, whenever your trigger is clicked the pop-up message will appear.

Below are some websites where you can find more information about prompt boxes. When I was researching this method, I found a lot of information about how to do this in Javascript. While this is not what I was looking for, it did help me understand the process behind the technique. There are “if-statements” and “else if statements” implemented, which explains the concept well. To me, the Java code worked more like my brain does then the Dreamweaver method did, so it helped me a lot. I included places to find information about the Javascript as well.

http://www.kgv.ac.uk/intranet/it/cer/Unit7Web/unit%207%20ELT/create/dreamweaver/popup/intro2.htm
http://www.webdesign.org/html-and-css/tutorials/creating-a-pop-up-message-with-dreamweaver-cs3.20303.html
http://www.w3schools.com/js/js_popup.asp

Good luck!

– TS

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s