Advertisement
Guest User

Untitled

a guest
Apr 16th, 2014
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.09 KB | None | 0 0
  1. <p> <a class="show-popup" href="#">Manual Therapy</a></p>
  2. <div class="overlay-bg">
  3. <div class="overlay-content">
  4. <h2>Manual Therapy</h2>
  5. <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
  6. <button class="close-btn">Close</button>
  7. </div>
  8. </div>
  9. <a class="show-popup" href="#">LIST ITEM 2</a>
  10. <div class="overlay-bg">
  11. <div class="overlay-content">
  12. <h2>Low Level LASER Therapy</h2>
  13. <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
  14. <button class="close-btn">Close</button>
  15. </div>
  16. </div>
  17.  
  18. .overlay-bg {
  19. display: none;
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. height:100%;
  24. width: 100%;
  25. cursor: pointer;
  26. background: #000; /* fallback */
  27. background: rgba(0,0,0,0.75);
  28. }
  29. .overlay-content {
  30. background: #fff;
  31. padding: 1%;
  32. width: 700px;
  33. height: 400px;
  34. overflow:auto;
  35. position: relative;
  36. top: 15%;
  37. left: 30%;
  38. margin: 0 0 0 -10%; /* add negative left margin for half the width to center the div */
  39. cursor: default;
  40. border-radius: 4px;
  41. box-shadow: 0 0 5px rgba(0,0,0,0.9);
  42. }
  43.  
  44. $(document).ready(function(){
  45. // show popup when you click on the link
  46. $('.show-popup').click(function(event){
  47. event.preventDefault(); // disable normal link function so that it doesn't refresh the page
  48. $('.overlay-bg').show(); //display your popup
  49. });
  50.  
  51. // hide popup when user clicks on close button
  52. $('.close-btn').click(function(){
  53. $('.overlay-bg').hide(); // hide the overlay
  54. });
  55.  
  56. // hides the popup if user clicks anywhere outside the container
  57. $('.overlay-bg').click(function(){
  58. $('.overlay-bg').hide();
  59. })
  60. // prevents the overlay from closing if user clicks inside the popup overlay
  61. $('.overlay-content').click(function(){
  62. return false;
  63. });
  64.  
  65. });
  66.  
  67. $('.overlay-bg').show();
  68.  
  69. $(this).parent().next().show();
  70.  
  71. .overlay-content {
  72. display:none; /* NOTE THIS */
  73.  
  74. <a class="show-popup" href="#cont1">Manual Therapy</a>
  75. <a class="show-popup" href="#cont2">LIST ITEM 2</a>
  76.  
  77.  
  78. <div class="overlay-bg">
  79. <div id="cont1" class="overlay-content">
  80. <h2>Manual Therapy</h2>
  81. <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
  82. <button class="close-btn">Close</button>
  83. </div>
  84. <div id="cont2" class="overlay-content">
  85. <h2>Low Level LASER Therapy</h2>
  86. <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
  87. <button class="close-btn">Close</button>
  88. </div>
  89. </div>
  90.  
  91. $(function(){
  92.  
  93. $('.show-popup').click(function(event){
  94. event.preventDefault();
  95. $('.overlay-bg,'+ $(this).attr('href')).show(); // Show overlay, but also
  96. }); // the popup ID content
  97. // taken from the anchor HREF
  98. $('.overlay-bg, .close-btn').click(function(){
  99. $('.overlay-bg, .overlay-content').hide();
  100. });
  101.  
  102. $('.overlay-content').click(function(event){
  103. event.stopPropagation();
  104. });
  105.  
  106. });
  107.  
  108. <a class="show-popup" href="#" id="1">Manual Therapy</a></p>
  109. <div class="overlay-bg" id="div_1">
  110. <div class="overlay-content">
  111. <h2>Manual Therapy</h2>
  112. <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
  113. <button class="close-btn">Close</button>
  114. </div>
  115. </div>
  116. <a class="show-popup" href="#" id="2">LIST ITEM 2</a>
  117. <div class="overlay-bg" id="div_2">
  118. <div class="overlay-content">
  119. <h2>Low Level LASER Therapy</h2>
  120. <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
  121. <button class="close-btn">Close</button>
  122. </div>
  123. </div>
  124.  
  125. <script>
  126. $(document).ready(function(){
  127. // show popup when you click on the link
  128. $('.show-popup').click(function(event){
  129. var id = $(this).attr("id");
  130. event.preventDefault(); // disable normal link function so that it doesn't refresh the page
  131. $('#div_'+id).show(); //display your popup
  132. });
  133.  
  134. // hide popup when user clicks on close button
  135. $('.close-btn').click(function(){
  136. var id = $(this).attr("id");
  137. $('#div_'+id).hide(); // hide the overlay
  138. });
  139.  
  140. // hides the popup if user clicks anywhere outside the container
  141. $('.overlay-bg').click(function(){
  142. $(this).hide();
  143. })
  144. // prevents the overlay from closing if user clicks inside the popup overlay
  145. $('.overlay-content').click(function(){
  146. return false;
  147. });
  148.  
  149. });
  150. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement