dfp-image-interstitial.css

#dfp-sb {
    display: inline;
}
#dfp-sb-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.5);
}
#dfp-sb-content-container {
    padding: 15px;
    margin: auto;
    position: relative;
    z-index: 999;
}
#dfp-sb-header {
    width: 100%;
    position: relative;
    left: 0;
}
#dfp-sb-title {
    position: absolute;
    left: 0;
    top: 0;
}
#dfp-sb-close-btn {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
#dfp-sb-content {
    color: white;
    background: rgba(0, 0, 0, 0.5);
}

dfp-image-interstitial.html

<div id="dfp-sb">
    <div id="dfp-sb-overlay"></div>
    <div id="dfp-sb-content-container">
        <div id="dfp-sb-header">
            <div id="dfp-sb-title">ADVERTISEMENT</div>
            <button id="dfp-sb-close-btn">X</button>
        </div>
        <div id="dfp-sb-content">
            <h1>Content will go here.</h1>
            <h2>Content will go here.</h2>
            <h3>Content will go here.</h3>
            <h4>Content will go here.</h4>
            <h5>Content will go here.</h5>
        </div>
    </div>
</div>

dfp-image-interstitial.js

var sourceImage   = "[%Image%]";
var sourceWidth   = "[%Width%]";
var sourceHeight  =  "[%Height%]";
var linkUrl       = "%%CLICK_URL_ESC%%[%ClickthroughURL%]" ;
var browserHeight = (window.parent.innerHeight > 0) ? window.parent.innerHeight : screen.height;
var spaceTop      = (browser_height - source_height - 30) / 2;
var dfpShadowbox  = window.parent.document.getElementById('dfp-sb-content-container');

dfpShadowbox.style.marginTop = spaceTop + "px";
dfpShadowbox.style.width     = sourceWidth + "px";

var adHtml = '<a href="' + linkUrl + '" target="_blank"><img src="' + sourceImage + '" style= "width:' + sourceWidth + 'px;"></a>' ;

dfpShadowbox.insertAdjacentHTML('beforeend', adHtml);

var shadowbox = {
    close: function _close() {
        dfpShadowbox.style.display = 'none';
    }
};

window.parent.document.getElementById('dfp-sb-close-btn').onclick = shadowbox.close;

dfp-image-interstitial.markdown

dfp-interstitial

A Pen by Douglas Dobrzynski on CodePen.

Note: This has been modified from that in CodePen for use as a custom DFP creative template.

License.

dfp-image-interstitial.min.css

#dfp-sb-close-btn,#dfp-sb-overlay,#dfp-sb-title{position:absolute;top:0}#dfp-sb{display:inline}#dfp-sb-overlay{width:100%;height:100%;left:0;z-index:998;background:rgba(0,0,0,.5)}#dfp-sb-content-container{padding:15px;margin:auto;position:relative;z-index:999}#dfp-sb-header{width:100%;position:relative;left:0}#dfp-sb-title{left:0}#dfp-sb-close-btn{right:0;cursor:pointer}#dfp-sb-content{color:#fff;background:rgba(0,0,0,.5)}

dfp-image-interstitial.scss

#dfp-sb {
    display: inline;
    &-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 998;
        background: rgba(0, 0, 0, 0.5);
    }
    &-content-container {
        padding: 15px;
        margin: auto;
        position: relative;
        z-index: 999;
    }
    &-header {
        width: 100%;
        position: relative;
        left: 0;
    }
    &-title {
        position: absolute;
        left: 0;
        top: 0;
    }
    &-close-btn {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }
    &-content {
        color: white;
        background: rgba(0, 0, 0, 0.5);
    }
}