twitterfacebook
Top 30 sites for freelancers
Every site you'll ever need! check it out →

How to code a basic inline popup

How to code a basic inline popup

Popups can be a brilliant way to advertise products or display information.
In this tutorial I will show you how you can code one, so first of enter the following code into anywhere between the body tags of your website, if you are starting with a blank page then enter this onto it (for editing I recommend Notepad++):

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<head>

<title>PAGE TITLE</title>

</head>

<body>

<h1>Page heading</h1>

 

</body>

</html>

So below “<h1>Page heading</h1>” or anywhere below the body tags enter the following code:

<!-- 1. Paste this somewhere near the top of your <body> -->

<script type='text/javascript'>
  function pseudo_popup(content) {
    /* There are lots of ways to create the content, but for simplicity
    * this will just assume an HTML string */

    var popup = document.createElement("div");

    popup.innerHTML = content;

    /* Change this to suit your style */
    popup.style.background = "white";
    popup.style.border = "1px solid #888";

    /* To make it "pop out" a bit more, it can have a shadow. */
    if( navigator.userAgent.match(/msie/i) ) {
      /* Internet Explorer uses linear gradients for this, so give it
      * three such shadows to look more "3D"
      */
      function shadow_filter(spec) {
        return "progid:DXImageTransform.Microsoft.Shadow(" + spec + ")";
      }
      popup.style.filter = [
        shadow_filter("color=black, strength=5"),
        shadow_filter("color=black, strength=2, direction=135"),
        shadow_filter("color=black, strength=2, direction=315")
      ].join(" ");
    } else {
      /* Most other browsers support CSS3 shadows */
      popup.style.MozBoxShadow =
        popup.style.webkitBoxShadow =
          popup.style.BoxShadow = "-4px 4px 11px black";
    }

    var viewport_width = window.innerWidth;
    var viewport_height = window.innerHeight;

    /* It's important to allow the box to be dismissed. In this case,
    * it's a gently shaded clickable underlay.
    */
    function add_underlay() {
      var underlay = document.createElement("div");

      /* Set it to be "full screen" */
      underlay.style.position = "fixed";
      underlay.style.top = "0px";
      underlay.style.left = "0px";
      underlay.style.width = viewport_width + "px";
      underlay.style.height = viewport_height + "px";

      /* Set its background as compatibly as possible */
      underlay.style.background = "#7f7f7f";
      if( navigator.userAgent.match(/msie/i) ) {
        /* Internet Explorer requires a filter */
        underlay.style.background = "#7f7f7f";
        underlay.style.filter =
          "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
      } else {
        /* Pretty much everything else can do RGBA */
        underlay.style.background = "rgba(127, 127, 127, 0.5)";
      }

      /* Make clicking it close both */
      underlay.onclick = function() {
        underlay.parentNode.removeChild(underlay);
        popup.parentNode.removeChild(popup);
      };
      document.body.appendChild(underlay);
    }

    add_underlay();

    /* Get the viewport centre */
    var x = viewport_width / 2;
    var y = viewport_height / 2;

    /* Lock it relative to the viewport */
    popup.style.position = "fixed";

    document.body.appendChild(popup);

    /* Find its size and adjust to centre */
    x -= popup.clientWidth / 2;
    y -= popup.clientHeight / 2;

    popup.style.top = y + "px";
    popup.style.left = x + "px";

    return false;
  }
</script>

<!-- 2. Set up something to make the popup -->

<a onclick='pseudo_popup("<h2>Hello World!</h2><p>This is a basic popup!
now lets customise it a bit!</p>")'>Click here!</a>

Now preview your page in a browser – it should look something like this:
http://youngwebbuilder.com/test/ (when you click on “click here” the popup will display).
You will see that the code has instructions with it for easy customisation.
Now to give it a bit of colour…
Find:

/* Change this to suit your style */
    popup.style.background = "white";
    popup.style.border = "1px solid #888";

…and there you can change the popup background and border (for a list of CSS/Html colours: http://www.w3schools.com/cssref/css_colors.asp).

To change the colour of the text you will have to go into the style sheet, and either “class” it or else just keep it to the default text colour or you could use this code:

<FONT COLOR=”#COLOUR”>text </FONT>

To add more text/images to the popup you will have to edit the text/code in red, and the text that displays the popup in blue:

<a onclick='pseudo_popup("
<h2>Hello World!</h2><p>This is a basic popup!
now lets customise it a bit!</p>")'>Click here!</a>

If you need any help, please visit us in the forum where we’ll be happy to help.

Written by Josh

Nothing you need to know? Oh alright then.. I'm a Young web builder in my spare time! Whilst engaged with exams, university, and what not.