One of those annoying overlays in jQuery


FMA Edward Elric Writing

I spent the better part of a night writing one of those annoying popup overlays that come up with an advertisement or urge you to join their newsletter, or show a paywall when you first load a site for the first time. Yeah, this kind of thing. Don’t look at me, I just do what I’m told…

As an aside, I’m fairly apathetic about these kinds of modal overlays. From a user perspective, it’s a nuisance but a fairly temporary one, as a marketer you are trying to target users with information you think they would want. You can’t please everyone, obviously.

Given that I haven’t really written anything in jQuery for a while, this is really quite simple, something I just threw into the <header></header> tags actually, rather than place it in its own file. In fact, I’ve had enough trouble remembering to import jQuery in the first place, while wondering why it doesn’t work. Well, it doesn’t know what to do with this code it doesn’t understand!

The jQuery basically works on a basis of changing the CSS and adding some HTML elements to the page, so as a bonus if you have something like NoScript installed or have JavaScript disabled in another way, there is no chance you would ever see it. I haven’t even looked into cookies and such yet though (so repeat visitors wouldn’t have to see it again), but I’m trying to avoid using libraries because importing things is a pain. Too bad using a variable didn’t work..

I can’t really see anyone wanting this, but here y’go.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">

$(document).ready(function(){

  $("body").append("<div id='overlay'></div>");
  $("body").append("<div id='popup'><p id='closepopup'><img style='width:40px; height:40px;' src='close.png' /></p><h2>Introducing the Pop-Up!</h2><p>A brilliant work of white box-shaped content, all in the one convenient package with a handy exit button!</p></div>");
  
  $("#overlay")
     .css({
        'height': '100%',
        'opacity' : '0.6',
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'background-color': 'black',
        'width': '100%',
        'z-index': '5000',
        '-ms-filter' : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)',
        'filter': 'alpha(opacity=60)',
     });
    
     $("#popup")
        .css({
           'background-color' : 'white',
           'position': 'fixed',
           'top': '40%',
           'margin' : 'auto',
           'width': '300px',
           'left': '35%',
           'right': '35%',
           '-webkit-border-radius': '10px',
           '-moz-border-radius': '10px',
           'border-radius': '10px',
           '-moz-box-shadow': '0px 0px 10px #222',
           '-webkit-box-shadow': '0px 0px 10px #222',
           'box-shadow': '0px 0px 10px #222',
           'height': '200px',
           'padding': '20px',
           'z-index': '6000',
        });

      $("#closepopup")
         .css({
             'right': '10px',
             'top': '-13px',
             'position': 'absolute',
         });
    
    $('img').hover(
     function () {
       $(this).css({
           '-moz-box-shadow': '0px 0px 10px #222',
           '-webkit-box-shadow': '0px 0px 10px #222',
           'box-shadow': '0px 0px 10px #222',
           '-webkit-border-radius': '500px',
           '-moz-border-radius': '500px',
           'border-radius': '500px',
           'cursor': 'pointer'});
     }, 
     function () {
       $(this).css({
           '-moz-box-shadow': 'none',
           '-webkit-box-shadow': 'none',
           'box-shadow': 'none'});
     }
   );
        
    $("#closepopup").click(function(){
        $("#overlay").css({
          'display': 'none',
          'visibility': 'none',
        });
        $("#popup").css({
          'display': 'none',
          'visibility': 'none',
        });
    });
  
});
</script>