TRANSITIONING OPACITY Example Modal Dialog MODAL BOX Box
TRANSITIONING OPACITY Example: Modal Dialog
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
EXAMPLE: MODAL DIALOG Tweak the CSS to accomplish what you want!
STEP 1 Links to div right below it – we will hide this until the link gets clicked Used as hook to open the modal box Used to style the modal box
RESULT
STEP 2 Link to close the modal box – will be styled Heading and text content of modal box
RESULT
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
STEP 3 Modal sits on top of everything else Hide everything until opened (link clicked) Fade onto screen Ensures “Close” link is not clickable until we open modal
RESULT
STEP 4 Pseudoclass : target – means when this is the target of a clicked link Opacity: 1 – makes totally NOT see-thru Since modal now showing, make link it contains clickable
STEP 4 The > in CSS selector here means style any div’s whose parent has class modal. Dialog Style modal box so pretty and where we want it on page
RESULT (ONCE LINK IS CLICKED) This still looks awful
STEP 5: STYLE CLOSE BUTTON hovered
- Slides: 14