Guest User

Untitled

a guest
Feb 19th, 2018
60
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.29 KB | None | 0 0
  1. <h1>Title A</h1>
  2. <p>some content of variable length <a class="details" data-popup-open="A_details"></p>
  3.  
  4. <h1>Title B</h1>
  5. <p>some content of variable length <a class="details" data-popup-open="B_details"></p>
  6.  
  7. <div class="popup" data-popup="A_details">
  8. <div class="popup-inner">
  9. <p>Some content of variable length</p>
  10. </div>
  11. </div>
  12.  
  13. <div class="popup" data-popup="B_details">
  14. <div class="popup-inner">
  15. <p>Some content of variable length</p>
  16. </div>
  17. </div>
  18.  
  19. $(function() {
  20. $('[data-popup-open]').on('click', function(e) {
  21. var targeted_popup_class = jQuery(this).attr('data-popup-open');
  22. $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
  23. e.preventDefault();
  24. });
  25.  
  26. $(".popup").click(function(){
  27. $(".popup").fadeOut(350).removeClass("active");
  28. });
  29. $(".popup-inner").click(function(e){
  30. e.stopPropagation();
  31. });
  32. });
  33.  
  34. .popup {
  35. width:100%;
  36. height:100%;
  37. display:none;
  38. position:fixed;
  39. top:0px;
  40. left:0px;
  41. background:rgba(0,0,0,0.75);
  42. z-index:1000;
  43. }
  44.  
  45. .popup-inner {
  46. max-width:350px;
  47. width:90%;
  48. padding:1.5em;
  49. position:absolute;
  50. top:50%;
  51. left:50%;
  52. -webkit-transform:translate(-50%, -50%);
  53. transform:translate(-50%, -50%);
  54. box-shadow:0px 2px 6px rgba(0,0,0,1);
  55. border-radius:3px;
  56. background:#fff;
  57. }
Add Comment
Please, Sign In to add comment