There is a hidden iframe block that is in the body. There are projects on the site that have a link to the project card. But when you click on a project, an ajax request occurs that sends the card page to a hidden iframe. Iframe from here unfolds smoothly and fills the entire screen page. The ascent begins at the center of the screen. Question. Is it possible to make this block ascend from where the project clicked, that is, iframe starts from the center of the project block and not from the center of the whole body. Here is the implementation of my code

$( document ).ready(function() { $(".case_item_mob .case_link_<?php echo $post->ID ?>").on("click", function(e) { e.preventDefault(); $.ajax({ url: "<?php the_permalink(); ?>", success: function(data){ $("#frame").attr("src", "<?php the_permalink(); ?>"); $('.iframe_project, #frame').css({ 'background-repeat':'no-repeat', 'background-position':'center', 'background-size':'cover', 'position':'fixed', 'top':'0', 'left':'0', 'width':'100%', 'height':'100%', 'z-index':'100', }); $('#frame').removeClass('animated zoomOut'); $('#frame').addClass('animated zoomIn'); $('.iframe_project, #frame').fadeIn(); $("body").css("overflow", "hidden"); $('.close').fadeIn(); history.pushState(null, null, '<?php the_permalink(); ?>'); } }); }); $(".close").on("click", function(e){ e.preventDefault(); $('#frame').removeClass('animated zoomIn'); $('#frame').addClass('animated zoomOut'); $('#frame, .iframe_project').fadeOut(2100); $("body").css("overflow", "auto"); $('.close').fadeOut(); history.pushState(null, null, '/'); setTimeout(function(){ var frame = document.getElementById("frame"), frameDoc = frame.contentDocument || frame.contentWindow.document; frameDoc.documentElement.innerHTML = ""; }, 2100); });

});

  • You can give html code, but in general through css you can specify all this - GENESIS

1 answer 1

In this case, the solution may be not just to change the src of the iframe, but to add the whole iframe with the necessary src to the necessary block

  • in src iframe is set the link that is loaded in it. The animation itself starts from the center of the screen. If you put an iframe into a block, it will be expanded within this block. And I need to start the animation inside the block, then fill the entire area of ​​the screen. - Manuk Ajemian