Skip to content

omahacodeschool/101-javascript-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JavaScript - Modal

This is an example of a simple HTML page where, when the user clicks the "add note" button, a modal window with a form appears.

Fork and clone this repo and take a look through the index.html, style.css, and script.js files and try to parse how this works.

Look up CSS properties you do not know and take a look at the documentation for parts of the JavaScript, if you are feeling bold.

Try to implement a working version of a single modal pop up on your own

Do this out of the context of any other application you've built. You should just need a HTML file, CSS file, and JavaScript file.

Helpful steps to look up include:

  • JavaScript click events
  • Adding / removing classes using JavaScript
  • Adding / removing styles using JavaScript

Build the Close Button

See if you can add a feature such that the when a user clicks the "x" in the modal window, the modal and overlay is hidden.

Implement Modal Pop-Ups for the Fiona Salon Site

On the services page of the Fiona Salon, build functionality so that:

  • When a user clicks the name of a massage service, a modal window pops up.
  • That window contains the name of the massage, the decorative scroll, the massage description (you can copy directly from the services page), and a price. You can decide on a design for displaying this information.
  • When the user clicks an "x" icon, the modal window disappears.

Start by building the modal functionality for just one service, then work to expand it to all of the services.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published