scrimba
Frontend Career Path
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Build a Modal: Overlay CSS
Expand for more info
styles.css
run
preview
console
html, body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

/**
Our buttons '#open-modal, #close-modal'

1) For the background colour use 'royalblue'
2) Be aware of the colour, padding & font size
3) Make sure the cursor has a pointer so that it demonstrates to the user the button is clickable
**/
#open-modal, #close-modal {
background-color: royalblue;
color: white;
padding: 15px;
font-size: 20px;
cursor: pointer;
}

/**
Modal: #modal

1) Add a temporary background colour of 'orange'
2) Add a padding of 20px
3) Add a height of 200px
4) Add a margin of 0 & auto to make sure our Modal is centered
5) Add a max-width of 600px
**/
#modal {
background-color: orange;
max-width: 600px;
margin: 0 auto;
padding: 20px;
height: 200px;
}

/**
Overlay: #overlay

1) Add a width and a height of 100%
2) Position absolute (allows us to place any element exactly where we want it)
3) Set top, left, bottom, right to 0
4) Add a background colour of black
5) Add position relative to #modal so that it's relative to #overlay
**/
#overlay {
display: none;
}
Console
/index.html
-4:38