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!

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

Swapnil Srivastava
Swapnil Srivastava
13,146 Points
Posted by Swapnil Srivastava
Swapnil Srivastava
13,146 Points

How to a create a simple modal UI using JavaScript on a webpage , after clicking on a button or a link

I want to create a simple modal UI using a JavaScript or jquery with a message , the modal should appear after a button is clicked on the webpage and it should make everything on its background blur .

I am thinking of using a div element on the html ... and some how make it work with JavaScript but I am missing how to implement it .. Can someone put me in the right direction

2 Answers

Aisha Blake
STAFF
Aisha Blake
Treehouse Guest Teacher
Aisha Blake
Aisha Blake
Treehouse Guest Teacher

Putting on my web developer hat, I'd say that you should use a plugin to do that for you and make sure to read the documentation carefully for whichever one you choose to make sure you're using it correctly.

Putting on my teacher hat, I'd ask whether you were doing this as an exercise just to make sure you understood what a modal is in theory. If that's the case, you might consider using jQuery to show and hide the element. Take a look at the on() method as well as toggle().

Swapnil Srivastava
Swapnil Srivastava
13,146 Points
Swapnil Srivastava
Swapnil Srivastava
13,146 Points

Thanks. Aisha, It was a helpful suggestion. I did using jQuery Dialog.

if I wanted not to use any plugin of such sorts, could you briefly describe how it could be done.

Aisha Blake
Aisha Blake
Treehouse Guest Teacher
Aisha Blake
Aisha Blake
Treehouse Guest Teacher

Sorry this took me so long to respond to! I might need to change my notification settings...

Anyway, there are plenty of ways you could create a modal. One extremely simple way would be to create an element that stretched across the viewport and, in your CSS, set its display property to none. Then, you'd use on() to, when your button was clicked, show that hidden element. (jQuery has a show() method.)