Transitioning Opacity Example: Modal Dialog

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

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 <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

Result

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

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 .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; }

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

Result

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

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

Result (once link is clicked) This still looks awful

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;