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