To show a modal Offer template full screen, you can in addition to the Show Offer card, utilize a Run JS card in which you would inject the styles for this fullscreen modal, and later after the modal has been closed, deleted these additional styles (since they can affect 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".