Firstly you need to make sure that the gallery is not set on infinite scroll as by removing the scrollbars the iframe itself will never be scrolled.


Do do this we must use the capiGrid addon (the documentation for which can be found here https://community.offerpop.com/docs/DOC-1386)


Once this has been installed you then need to get the client to add a script tag into the parent page after jQuery has been initiated on that page, as the postmessage script need jQuery, if the client doesn't have jQuery on the page you'll need to make sure they include it.


<script src="https://pro-serv-london.s3.amazonaws.com/core/postmessage.jquery.parent.js" type="text/javascript"></script>


The the offerpop frame in advanced css you'll need to add a script tag;


<script src="https://pro-serv-london.s3.amazonaws.com/core/postmessage.jquery.iframe.min.js" type="text/javascript"></script>


and the following code;


 

$0pop(document).ready(function() {

  $0pop(document).on("click" ,".search-grid-item", function() {
    $0pop("#scrolltopopup").click();
    $0pop("#scrollback").attr("data-target","#" + $0pop(this).attr("id"));
    });

});

 


This code will allow scrolling up to the modal popup and back down once it closes, but you'll need to add some html for that code to attach to (you can add it to the cta section)


 

<div id="scrolltopopup" class="scrollto hidden" data-target="#cta"></div>
<div id="scrollback" class="scrollto hidden" data-target=""></div>