Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops `do ... while` Loops

Jim McQuarrie
Jim McQuarrie
10,597 Points
Posted by Jim McQuarrie
Jim McQuarrie
10,597 Points

popup box

In this exercise Dave uses a popup to add an email, now I would guess an alert dialog box is not the best solution to do this, what is best practices to open a popup box to collect information?

Demian Martinez
Demian Martinez
2,985 Points
Demian Martinez
Demian Martinez
2,985 Points

the prompt() method will do just that! make sure to create a variable to store whatever is put into prompt. For example

var email = prompt("What is your email?");
Jim McQuarrie
Jim McQuarrie
10,597 Points
Jim McQuarrie
Jim McQuarrie
10,597 Points

I guess I need to ask the question a little different. I am asking for an advanced solution to a real popup box that may hold say for example an email sign up form, or other things like a program such as popup domination opens. I fully understand the exercise that Dave did in this lesson, would just like a more advanced example of a real world popup for example.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Take a look at the jQuery course on how to make a lightbox, It teaches you how to set something like that up, although you will need to use PHP or Node to implement the Email.

1 Answer

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

You can use css and jquery to create a nice looking pop up or modal window, something like this:

<body>
    <a class="pop-up-btn">Click to reveal</a>
    <div id="pop-up">
        <form>
            <input type="email" name="email">
            <input type="submit" value="Submit">
        </form>
   </div>
</body>

/* CSS */
html, body {
    height: 100%;
    width: 100%;
}

#pop-up {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 60px;
    padding: 30px;
    background:tomato;
    display: none;
    opacity:0;
}

//Jquery
$(document).ready(function() {
    $('.pop-up-btn').click(function(){
       $('#pop-up').show().animate({
        top : '130px',
        opacity : '1'
       }); 
    });
});
Jim McQuarrie
Jim McQuarrie
10,597 Points
Jim McQuarrie
Jim McQuarrie
10,597 Points

Thank you, I am going to try and incorporate.