Discuz! 透過boorstrap modal效果樣式以及Google DFP聯播平台加入蓋板廣告作法

viewthread.htm

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<style type="text/css">
.modal{ text-align: center; }
.modal-dialog {
    display: inline-block;
    vertical-align: middle;
    margin-top: 50px !important;
}
</style>
<script type="text/javascript" src="/template/frontend/js/bootstrap_modal337/bootstrap.min.js"></script>

<script>
/**
 * 當然別忘了在header.htm內加入DFP libaray!
 */    
    
googletag.cmd.push(function() {
    googletag.defineSlot('[DFP_IDCODE]/[AD_IDENTIFY]', [300, 250], '[DIV_ID]').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
});
</script>
<div class="modal" id="mobileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="text-align:center;position:relative;margin-left:-10px;">
    <span class="fa-stack fa-lg" style="position:absolute;top:-35px;right:-35px;z-index:-1;" data-dismiss="modal" aria-label="Close">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
    <div id='[DIV_ID]' style='height:250px; width:300px;'>
    <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('[DIV_ID]'); });</script>
    </div>
  </div>
</div>

<script>
function centerModals(aelement) {
  var amodals;
  if (aelement.length) {
    amodals = aelement;
  } else {
    amodals = jQuery('#mobileModal:visible');
  }
  amodals.each( function(i) {
    var aclone = jQuery(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round((aclone.height() - aclone.find('.modal-dialog').height()) / 2);
    top = top > 0 ? top : 0;
    aclone.remove();
    jQuery(this).find('.modal-dialog').css("margin-top", top);
  });
}
jQuery('#mobileModal').on('show.bs.modal', function(e) {
  centerModals(jQuery(this));
});

googletag.cmd.push(function() {
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
    if (event.slot.getSlotElementId() == "[DIV_ID]") {
      // console.log('[DIV_ID]: '+event.isEmpty);
      if( !event.isEmpty ){
        setTimeout(function(){ jQuery("#mobileModal").modal('show'); }, 3500);
      }
    }
    });
});
</script>

適用於任何版本Discuz! X