 <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() { //----- OPEN $('[data-popup-open]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-open'); $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); setTimeout(function(){ $('.newsletter-popup').fadeOut(); }, 2000); e.preventDefault(); }); //----- CLOSE $('[data-popup-close]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-close'); $('[data-popup="' + targeted_popup_class + '"]').fadeOut(); e.preventDefault(); }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Outer */ .newsletter-popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); } /* Inner */ .popup-inner { max-width:700px; width:90%; padding:40px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; } /* Close Button */ .popup-close { width:30px; height:30px; padding-top:4px; display:inline-block; position:absolute; top:0px; right:0px; transition:ease 0.25s all; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); border-radius:1000px; background:rgba(0,0,0,0.8); font-family:Arial, Sans-Serif; font-size:20px; text-align:center; line-height:100%; color:#fff; text-decoration:none; } .popup-close:hover { -webkit-transform:translate(50%, -50%) rotate(180deg); transform:translate(50%, -50%) rotate(180deg); background:rgba(0,0,0,1); text-decoration:none; } #popup-inner-content { text-align: center; font-size: 2em; color: #2a2a2a; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;a class="btn" data-popup-open="popup-1" href="#"&gt;Open Popup #1&lt;/a&gt; &lt;div class="newsletter-popup" data-popup="popup-1"&gt; &lt;div class="popup-inner"&gt; &lt;div id="popup-inner-content"&gt;Thanks for subscribing to our newsletter!&lt;/div&gt; &lt;!-- &lt;p&gt;&lt;a data-popup-close="popup-1" href="#"&gt;Close&lt;/a&gt;&lt;/p&gt; --&gt; &lt;a class="popup-close" data-popup-close="popup-1" href="#"&gt;x&lt;/a&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>