To show a modal Offer template full screen, use the Show Offer card and a Run JS card to inject fullscreen styles. After the modal closes, remove those styles to avoid affecting other templates on the page.
An example of the code that would be added to the Run JS card is as follows:
const style = `
.tp-modal iframe{
height: calc(100vh - 4px) !important;
}
.tp-iframe-wrapper {
margin: 0 auto !important;
height: 100% !important;
}
.tp-modal {
overflow-y: auto !important;
overflow-x: hidden !important;
}
`;
document.head.insertAdjacentHTML("beforeend", `<style id="fullscreen-modal">${style}</style>`)
tp.push(["addHandler", "checkoutClose", function(event){
switch (event.state){
case 'close':
let a = document.querySelector("#fullscreen-modal");
a.remove();
}
}]);
If the original page's content is covered by the backdrop overlay, you can potentially also just remove the iframe's background-color and box-shadow with the help of CSS on your end (similar to how it's described here). By doing so, the backdrop becomes the background for the modal, and the modal itself "becomes fullscreen".