02.06.2013 Views

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

238<br />

CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY<br />

This file will be called ajax.css, <strong>and</strong> it will reside in the css folder (/public/assets/css/ajax.css).<br />

After creating it, place the following style rules inside it:<br />

.modal-overlay {<br />

position: fixed;<br />

top: 0;<br />

left: 0;<br />

bottom: 0;<br />

width: 100%;<br />

height: 100%;<br />

background-color: rgba(0,0,0,.5);<br />

z-index: 4;<br />

}<br />

.modal-window {<br />

position: absolute;<br />

top: 140px;<br />

left: 50%;<br />

width: 300px;<br />

height: auto;<br />

margin-left: -150px;<br />

padding: 20px;<br />

border: 2px solid #000;<br />

background-color: #FFF;<br />

-moz-border-radius: 6px;<br />

-webkit-border-radius: 6px;<br />

border-radius: 6px;<br />

-moz-box-shadow: 0 0 14px #123;<br />

-webkit-box-shadow: 0 0 14px #123;<br />

box-shadow: 0 0 14px #123;<br />

z-index: 5;<br />

}<br />

.modal-close-btn {<br />

position: absolute;<br />

top: 0;<br />

right: 4px;<br />

margin: 0;<br />

padding: 0;<br />

text-decoration: none;<br />

color: black;<br />

font-size: 16px;<br />

}<br />

.modal-close-btn:before {<br />

position: relative;<br />

top: -1px;<br />

content: "Close";<br />

text-transform: uppercase;<br />

font-size: 10px;<br />

}

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!