Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <h1>Title A</h1>
- <p>some content of variable length <a class="details" data-popup-open="A_details"></p>
- <h1>Title B</h1>
- <p>some content of variable length <a class="details" data-popup-open="B_details"></p>
- <div class="popup" data-popup="A_details">
- <div class="popup-inner">
- <p>Some content of variable length</p>
- </div>
- </div>
- <div class="popup" data-popup="B_details">
- <div class="popup-inner">
- <p>Some content of variable length</p>
- </div>
- </div>
- $(function() {
- $('[data-popup-open]').on('click', function(e) {
- var targeted_popup_class = jQuery(this).attr('data-popup-open');
- $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
- e.preventDefault();
- });
- $(".popup").click(function(){
- $(".popup").fadeOut(350).removeClass("active");
- });
- $(".popup-inner").click(function(e){
- e.stopPropagation();
- });
- });
- .popup {
- width:100%;
- height:100%;
- display:none;
- position:fixed;
- top:0px;
- left:0px;
- background:rgba(0,0,0,0.75);
- z-index:1000;
- }
- .popup-inner {
- max-width:350px;
- width:90%;
- padding:1.5em;
- position:absolute;
- top:50%;
- left:50%;
- -webkit-transform:translate(-50%, -50%);
- transform:translate(-50%, -50%);
- box-shadow:0px 2px 6px rgba(0,0,0,1);
- border-radius:3px;
- background:#fff;
- }
Add Comment
Please, Sign In to add comment