1. Transitioning Opacity
Example: Modal Dialog

2. Box appears on top of other content
Modal Box
Box appears on top of other content
Usually disables other page content until dismissed
Typical Uses:
Logins/registration forms
Advertisements
Notifications to user

3. Example: Modal Dialog
Tweak the CSS to accomplish what you want!

4. Step 1
Links to div right below it – we will hide this until the link gets clicked
<a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> </div>
Used as hook to open the modal box
Used to style the modal box

5. Result

6. Step 2 Link to close the modal box – will be styled
<a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Modal Box</h2> <p>This is a sample modal box that can be created using the powers of CSS3.</p> <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> </div> </div>
Heading and text content of modal box

7. Result

8. Step 3 Will move down page, when open, if you scroll
Dark bg block out all content when modal is open
BG black & slightly see thru
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
transition: opacity 400ms ease-in;
pointer-events: none; }

9. Step 3 Modal sits on top of everything else
Hide everything until opened (link clicked)
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
transition: opacity 400ms ease-in;
pointer-events: none; }
Fade onto screen
Ensures “Close” link is not clickable until we open modal

10. Result

11. Step 4
Pseudoclass :target – means when this is the target of a clicked link
Opacity: 1 – makes totally NOT see-thru
.modalDialog:target {
opacity: 1;
pointer-events: auto; }
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
Since modal now showing, make link it contains clickable

12. Style modal box so pretty and where we want it on page
Step 4
The > in CSS selector here means style any div’s whose parent has class modalDialog
.modalDialog:target {
opacity: 1;
pointer-events: auto; }
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
Style modal box so pretty and where we want it on page

13. Result (once link is clicked)
This still looks awful

14. Step 5: Style Close Button
hovered
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000; }
.close:hover {
background: #00d9ff;