Im using jquery-1.3.2.js if that makes a difference. I have this code which works 90% fo what I want it to do. What I can't get is the "Close" link to fade out and then close. I can get it fade out but then the overlay is still over the page just not visible or I can get it to go away without fading. Putting a "return true;" in the link's onclick between run_this(); and the display none gets it to fade out, removing it gets it to display none. How can I combine this to it fades out then displays none? Thanks.
Code:<script type="text/javascript"> $(document).keydown(function(e) { if ((e.keyCode == 27) || (e.keyCode == 88) || (e.keyCode == 120)) { $('#overview').fadeTo("slow", 0); $('.black_overlay').fadeTo("slow", 0); } }); $(document).ready(function(){ $('.fadein').click(function(){ $('#overview').fadeTo("slow", 1); $('.black_overlay').fadeTo("slow", .8); }); }); function run_this() { $(document).ready(function(){ $('.fadeout').click(function(){ $('#overview').fadeTo("slow", 0); $('.black_overlay').fadeTo("slow", 0); }); }); return false; } </script> <style type="text/css"> .fadein { display: block; opacity:1; } #overview { display:none; opacity:0; display: none; position:absolute; top:25%; left:33%; margin:0 auto; width: 300px; height: 75px;; background-color: white; z-index:1002; overflow: auto; padding-left:10px; } .black_overlay{ display:none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; opacity:0; } .fadeout { position:absolute; right:10px; top:5px; } </style> <a href="javascript:void(0);" class="fadein" onClick="document.getElementById('overview').style.display ='block'; document.getElementById('fade').style.display ='block';">Show OverLay</a> <div id="overview"> <p>This is the overlay <a href="javascript:void(0);" class="fadeout" onClick="run_this(); document.getElementById('overview').style.display ='none'; document.getElementById('fade').style.display ='none';">Close</a></p></div> <div id="fade" class="black_overlay"></div>



Reply With Quote
Bookmarks