jquery - CSS Overlay - The Overlay is on top of the popup -
i have webpage in i'm trying implement css overlay. in order achieve using <div class="overlay"></div> using background image overlay effect, , <div class="overlay-box"></div> popup content itself. not need open , close popup feature right now, want overlay effect default on page load.
the html i'm using is:
<div id="wrapper"> <div class="sidebar"> <a class="cf-logo"><img src="images/cf-logo.png" alt="casting frontier" /></a> <ul class="nav"> <li><a href="#">projects</a></li> <li> <select> <option value="quick jump...">quick jump...</option> <option value="quick jump...">quick jump...</option> <option value="quick jump...">quick jump...</option> </select><br /> <a href="#">status</a></li> <li><a href="#">sides</a></li> <li><a href="#">mail</a></li> <li><a href="#">search</a></li> <li><a href="#">preferences</a></li> <li><a href="#">suggestion box</a></li> <li><a href="#">tools</a></li> <li><a href="#">logout</a></li> <li> <select> <option value="quick search">quick search:</option> <option value="quick search">quick search:</option> <option value="quick search">quick search:</option> </select> </li> </ul> </div><!-- end sidebar --> <div class="main-content"> <h2>breakdowns - activia</h2> <ul id="tabs-menu" class="menu"> <li><a href="#overview-content">overview</a></li> <li><a href="#roles-content">roles (6)</a></li> <li class="active"><a href="#breakdowns-content">breakdowns (1)</a></li> <li><a href="#schedules-content">schedules (0)</a></li> <li><a href="#notes-content">notes</a></li> <li><a href="#printreports-content">print reports</a></li> <li><a href="#history-content">history</a></li> </ul> <div id="overview-content" class="content"> overview </div><!-- end content --> <div id="roles-content" class="content"> roles </div><!-- end content --> <div id="breakdowns-content" class="content"> <table class="break-table"> <tr class="tc-head"> <th class="tc1">breakdown</th> <th class="tc2">sent at</th> <th class="tc3"></th> </tr> <tr class="tc-body"> <td class="tc1">first breakdown</td> <td class="tc2">10/04/13 02:59 pm</td> <td class="tc3"><a href="#" class="print-btn">print</a></td> </tr> </table> <div class="overlay-box"> <div class="overlay-head"> <a class="print-blue" href="#" onclick="window.print()">print</a> </div> <div class="overlay-content"> <h3>at&t</h3> <span class="overlay-title">plaster casting 323-465-9999</span> <div class="heading-bg"> <h4>job information</h4> </div> <table class="info-table1"> <tr> <td class="icol1"><strong>name:</strong></td> <td class="icol2">at&t</td> </tr> <tr> <td class="icol1"><strong>casting company:</strong></td> <td class="icol2">plaster casting</td> </tr> <tr> <td class="icol1"><strong>project type:</strong></td> <td class="icol2">commercial</td> </tr> <tr> <td class="icol1"><strong>union status:</strong></td> <td class="icol2">sag-aftra</td> </tr> <tr> <td class="icol1"><strong>conflicts:</strong></td> <td class="icol2">wireless communications,cell</td> </tr> <tr> <td class="icol1"><strong>rate:</strong></td> <td class="icol2">sag scale</td> </tr> <tr> <td class="icol1"><strong>director:</strong></td> <td class="icol2">john smith</td> </tr> <tr> <td class="icol1"><strong>producer:</strong></td> <td class="icol2">sara johnson</td> </tr> <tr> <td class="icol1"><strong>production company:</strong></td> <td class="icol2">smugler</td> </tr> <tr> <td class="icol1"><strong>prouction company ph#:</strong></td> <td class="icol2">323-323-3232</td> </tr> <tr> <td class="icol1"><strong>agency:</strong></td> <td class="icol2">rpa</td> </tr> <tr> <td class="icol1"><strong>agency producer:</strong></td> <td class="icol2">brian thompson</td> </tr> <tr> <td class="icol1"><strong>agency producer ph#:</strong></td> <td class="icol2">818-818-8181</td> </tr> </table> <table class="info-table2"> <tr> <td class="icol1"><strong>audition location:</strong></td> <td class="icol2">casting underground</td> </tr> <tr> <td class="icol1"><strong>audition address:</strong></td> <td class="icol2">1641 n.lvar ave., los angeles ca 900208</td> </tr> <tr> <td class="icol1"><strong>audition dates:</strong></td> <td class="icol2">08/03/2013, 08/04/2013</td> </tr> <tr> <td class="icol1"><strong>callback location:</strong></td> <td class="icol2">casting underground</td> </tr> <tr> <td class="icol1"><strong>callback address:</strong></td> <td class="icol2">1641 n.lvar ave., los angeles</td> </tr> <tr><td><br /></td></tr> <tr> <td class="icol1"><strong>callback dates:</strong></td> <td class="icol2">07/31/2013, 8/1/13, 8/2/13</td> </tr> <tr> <td class="icol1"><strong>submissions due by:</strong></td> <td class="icol2">noon tomorrow</td> </tr> <tr> <td class="icol1"><strong>submission note:</strong></td> <td class="icol2">please no double submissions</td> </tr> <tr> <td class="icol1"><strong>shoot dates:</strong></td> <td class="icol2">08/14/13, 08/15/13</td> </tr> <tr> <td class="icol1"><strong>shoot city:</strong></td> <td class="icol2">los angeles</td> </tr> </table> <h5>run:</h5> <p> 30 promo spot wil run network, cable, industrial, internet airing abc+ espn 60 run cable, internet, industrial airing espn </p> <h5>project notes:</h5> <p> roles double scale - might not know until edits. double scale exclusivity corporate messaging , competitive advertising folowing: a;; telecommunications (including wired , wireless telecomunications), comunication device hardware , software (including not limited smartphones, tablets, smartphone.tablets,;a[ docks, or netbooks), computer hardware , software, , programming services compete u-verse. exclusivity covers competitive advertising ibm, microsoft, cisco, hp,verizon,charter, cox communications, comcast, time warner, aple,directv, dish, verizon fios, t-mobile, , sprint. </p> <div class="roles"> <div class="heading-bg"> <h4>roles (5)</h4> </div> <div class="roles-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box gray-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box gray-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box gray-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box gray-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> <div class="roles-box"> <h5>(12) factory worker / male / african american, asian, caucasian, hispanic, middle eastern, multi-ethnic, native american, east indian, pacific islander, ambigious / 30-50</h5> <p> comedic actors can pull of cinematic performance doing little. little quirkier normal looking. need lok have been working @ factory anywhere between 10-30 years </p> <p class="role-extras"> <span class="attire"><strong>attire:</strong> modern factory coveralls or jumpsuits</span> <span class="role-added">role added at: <span class="role-date">07/30/13 12:18pm</span></span> </p> </div> </div><!-- end roles --> </div><!-- end overlay-content --> </div><!-- end overlay --> </div><!-- end content --> <div id="schedules-content" class="content"> schedules </div><!-- end content --> <div id="notes-content" class="content"> notes </div><!-- end content --> <div id="printreports-content" class="content"> print reports </div><!-- end content --> <div id="history-content" class="content"> history </div><!-- end content --> </div><!-- end main-content --> <div class="overlay"></div> </div> the css i'm using is:
.overlay { position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height:120%; z-index:998; background: url(images/overlay.png) repeat; display: none; display: block; min-width: 1100px; } .overlay-box{ width: 700px; height: 600px; margin: 0 auto; position: absolute; background: #fff url(images/overlay-bg.png) repeat-x; left: 400px; top: 50px; display: none; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px -2px 2px 3px #43484b; box-shadow: 0px -1px 4px 2px #43484b; display: block; overflow: auto; }
setting z-index: 999 or higher .overlay-box should solve problem.
Comments
Post a Comment