POPUP

by ecropolis

HTML

<script type="text/template" id="popup">
    <div class="popup-content">
      <div style="background-color: #7ac141; height: 24px;"></div>
      <h2><img src="https://ecropolis.s3.amazonaws.com/score/startup_success_2019_logo.png" alt="Startup Success Virtual Conference 2019"/></h2>
      <div class="popup-layout">
        <p class="popup-tagline">Get free, actionable insights from leading small business partners</p>
      </div>
      <div class="popup-schedule">
      	 <p class="popup-date">October 24, 2019</p>
         <p class="popup-time">12:00 PM - 5:00 PM Eastern</p>
      </div>
			<div class="popup-sponsors">
        <div class="popup-cta">
          <a href="https://onlinexperiences.com/Launch/QReg.htm?ShowUUID=D5EF72CD-7056-4B8C-9FCF-F7F8FF1333CE&AffiliateData=Popup" target="_blank">Register Today</a>
        </div>
      	<img src="https://ecropolis.s3.amazonaws.com/score/startup_success_2019_sponsor_score.png" width="150" class="popup-sponsor-score" alt="sponsored by SCORE"/>
      	<img src="https://ecropolis.s3.amazonaws.com/score/startup_success_2019_sponsor_fedex.png" width="150" class="popup-sponsor-fedex" alt="sponsored by FedEx"/>
      </div>
    </div>
  </script>

CSS

.featherlight .featherlight-content {
  background-image: url(https://ecropolis.s3.amazonaws.com/score/startup_success_2019_bg.jpg)!important;
  padding: 0!important;
  border-bottom: none!important;
  background-position-y: -11px!important;
  /* background-position-x: right!important; */
  background-position-x: 263px!important;
  background-repeat: no-repeat!important;
}
.popup-content {
  width: 800px;
  height: 600px;
  min-width: 100%;
  color: #2e568b;
}
.popup-content .popup-layout {
  height: 164px;
}

.popup-content h2 {
  width: 472px;
  padding: 36px 30px;
  margin-bottom: 0;
}
.popup-content h2 img {
  width: 100%;
}
.popup-content p {
  display: block;
  width: 50%;
  color: #265287;
  font-size: 26px;
  font-weight: bold;
  padding: 10px 30px;
  margin: 0;
  font-family: Gotham SSm A,Gotham SSm B,sans-serif;
}
.popup-content p.popup-tagline {
    margin: 10px 0;
    text-transform: uppercase;
    text-shadow: 2px 1px 4px rgba(255, 255, 255, 1);
}
.popup-content p.popup-date {
    font-size: 27px;
    text-shadow: 1px 1px 8px rgba(255, 255, 255, 1);
    text-transform: uppercase;
}
.popup-content p.popup-time {
  background: #7ac141;
  color: #FFF;
  font-size: 18px;
  display: inline;
  padding: 6px 10px;
  font-family: Gotham SSm A,Gotham SSm B,sans-serif;
  margin: 10px 24px;
}
.popup-content .popup-sponsors {
  text-align: right;
  padding: 40px 20px 30px;
}
.popup-content .popup-cta a {
  display: inline-block;
  background-color: #265287;
  color: #FFF;
  font-size: 32px;
  text-transform: uppercase;
  float: left;
  padding: 24px 28px 22px;
  border: none;
  cursor: pointer;
  font-family: Gotham SSm A,Gotham SSm B,sans-serif;
  font-weight: 400;
  text-decoration: none;
  line-height: 1em;
  margin: -10px 40px;
}
.popup-content .popup-cta a:hover {
    background-color: #0d2d54;
    color: #CCC;
}
.popup-content .popup-sponsors img {
  margin: 0 0 0 15px;
}
@media only screen and (max-width: 1024px){
  .featherlight .featherlight-content {
  ...

JavaScript

jQuery(function() {
  //if(modalSrc.cookie && Cookies.get('popup') == undefined){
  	jQuery('head').append(jQuery('<link rel="stylesheet" type="text/css" />').attr('href', featherlight_css));
    jQuery.getScript(featherlight_script, function( data, textStatus, jqxhr ) {
    	modalSrc.content = jQuery('#popup').html();
      jQuery.featherlight(modalSrc.content,{
        variant: 'popup',
        closeOnEsc: true,
        closeIcon: '&#10005;',
        closeTrigger: 'click',
        afterOpen:function(){
          if(modalSrc.cookie) Cookies.set('popup','true');
          var $c = jQuery(this.$instance).find('.featherlight-content');
          //$c.find('.popup-link').html('Register Now');
        }
      });
    });
	//}
});

var modalSrc = {
  cookie: false,
  cdn: 'https://cdnjs.cloudflare.com/ajax/libs/',
  app: 'featherlight',
  version: '1.7.13',
  script: 'featherlight.min.js',
  css: 'featherlight.min.css',
  content: '<div class=\"popup-content\">\
    <p><img src=\"https:\/\/scorechicago.org\/wp-content\/uploads\/2018\/02\/SCORE-2018-Business-Forum-Tribune-ad-mail-600x655-update-1.png\" alt=\"Chicago SCORE 2018 Business Forum\" width=\"828\" height=\"295\"></p>\
    <p style=\"text-align:center;margin-bottom:0\"><a href=\"https:\/\/www.scorebusinessforum.org/\" target=\"_blank\" class=\"cta-link popup-link\"><span>Register Now</span></a></p>\</div>'
};


var featherlight_script = modalSrc.cdn+modalSrc.app+'/'+modalSrc.version+'/'+modalSrc.script;

var featherlight_css = modalSrc.cdn+modalSrc.app+'/'+modalSrc.version+'/'+modalSrc.css;