Complete Lightbox


/ Published in: jQuery
Save to your folder(s)

A complete lightbox with minimal code and full functionality: close button, close on escape keypress, close on lightbox blur event.


Copy this code and paste it in your HTML
  1. //==========================================================================================
  2. // the jQuery code
  3. //==========================================================================================
  4.  
  5. //creating the lightbox
  6. var lightbox = function() {
  7. var lH = $('#wrapper').outerHeight();
  8. var lW = $('#wrapper').outerWidth();
  9. $('#lightbox').css({'width' : lW, 'height' : lH});
  10. $('#lightbox').fadeIn();
  11. $('#ltb-cnt div').hide();
  12. }
  13.  
  14. var ltbCnt = function(){
  15. var ltbW = $('#ltb-cnt').outerWidth();
  16. var ltbH = $('#ltb-cnt').outerHeight();
  17. $('#ltb-cnt').css({'margin-top' : -ltbH/2, 'margin-left' : -ltbW/2});
  18. }
  19.  
  20. // lightbox fadeout on escape
  21. $(document).bind('keydown', function(e) {//use keydown instead of keypress because keypress doesn't work in Chrome and Opera
  22. if(e.keyCode==27){
  23. $("#lightbox").fadeOut();
  24. }
  25. });
  26.  
  27. var closeLtb = function() { //the close button function
  28. $('#lightbox').fadeOut();
  29. }
  30.  
  31. $('#lightbox').click(function(){ //fade out on .blur event
  32. $(this).fadeOut();
  33. });
  34.  
  35. $('#ltb-cnt').click(function(e){ //stop the fade out event propagation when clic on the container info
  36. e.stopPropagation();
  37. });
  38.  
  39. $('.close-ltb').click(function(){ // the close button click
  40. closeLtb();
  41. });
  42. // show different content depending on which button was clicked
  43. $('#rules-l').click(function(){
  44. lightbox();
  45. $('#rules').fadeIn();
  46. ltbCnt();
  47. });
  48. $('#winner-l').click(function(){
  49. lightbox();
  50. $('#winner').fadeIn();
  51. ltbCnt();
  52. });
  53. $('.enter').click(function(){
  54. lightbox();
  55. $('#succes').fadeIn();
  56. ltbCnt();
  57. });
  58.  
  59. //==========================================================================================
  60. // the CSS code
  61. //==========================================================================================
  62. #lightbox {
  63. position: absolute;
  64. top: 0;
  65. left: 0;
  66. background:url(images/lightbox-bg.png) repeat;
  67. display: none;
  68. }
  69.  
  70. #ltb-cnt {
  71. position: absolute;
  72. top: 50%;
  73. left: 50%;
  74. }
  75.  
  76. #ltb-cnt div {
  77. display: none;
  78. }
  79.  
  80. .ltb-content {
  81. padding: 20px;
  82. background: white;
  83. position: relative;
  84. }
  85.  
  86. .close-ltb {
  87. width: 43px;
  88. height: 43px;
  89. display: block;
  90. position: absolute;
  91. top: -20px;
  92. right: -20px;
  93. background-position: -299px 0;
  94. text-indent: -9999px;
  95. }
  96.  
  97. .close-ltb:hover {
  98. background-position: -342px 0;
  99. }
  100.  
  101. //==========================================================================================
  102. // the HTML markup
  103. //==========================================================================================
  104. <div id="lightbox">
  105. <div id="ltb-cnt">
  106. <div class="ltb-content" id="rules">
  107. <a href="#" title="inchide" class="close-ltb sprites">Inchide</a>
  108. Rules
  109. </div>
  110. <div class="ltb-content" id="winner">
  111. Castigatori
  112. </div>
  113. <div id="succes">
  114. Succes
  115. </div>
  116. </div>
  117. </div><!-- #/lightbox -->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.