Jazzing up Javascript confirmation boxes with Orman Clarks popup window template, JQuery & CSS

Hello there! If you are new here, you might want to subscribe to the RSS feed, or follow me on Twitter for updates on this topic.

Making user prompts look much more appetizing doesn’t have to be that much of a chore, especially when great UI designers are giving you their Photoshop templates for free!

Orman Clark over at premiumpixels.com regularly releases lovingly designed UI components to the masses. By request of a friend who’s starting out with JQuery, I thought I’d show you how to bring to life one of my favourites, the popup window. Click here to see a demo

Prerequisites:

You can also download a working demo here, this contains everything.

This guide requires basic Photoshop, CSS & HTML knowledge.

The usual JavaScript confirm box

(Firefox 12)

The custom confirm box

Step one – Cut the PSD

Open the PSD of the overlay you’ve downloaded from premiumpixels.com, hide all of the layers except the box outline & crop it to the size of the box, as per the image below:

Make a note of the size of the image and then save the box as a transparent PNG using the ‘Save for Web and Devices’ option in the Photoshop file menu as ‘box.png’. (Making sure you select the ‘transparent’ check box on the left hand side of the ‘Save for Web and Devices’ dialogue)

We repeat this process for the buttons, except saving them as ‘buttons.png’, so we end up with two files (‘box.png’ and ‘buttons.png’). The PSD should look something like the below before you save the buttons:

Step two – Layout the HTML & CSS

Start off with a blank HTML5 document, like so:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    </body>
</html>

Then we add the launch link, box, box title, box content & button holders into the body of the document:

<a id="launch" href="#">Launch Modal</a>
    
    <div id="myModal">
        <span>Are you sure you want to do that?</span>
        <div><p>Format hard disk?</p></div>
        <button>Yes, do it now</button>
        <button>No, I'm insane</button>
    </div>

Next we create a style sheet and style the elements we’ve just added. See the finished commented CSS file below:

/* Main box */
.promptBox {
  
  position: absolute;
  
  /* The width and height
  of our cropped box.png */
  width:360px; height:189px;
  background: url(box.png);
  
  /* Fonts and shadowing */
  font-family: Arial;
  color: #333;
  text-shadow: #ccc 1px 1px 1px;
  
  /* Hide the box (initially) */
  display:none;
  
  /* Our box.png image has an
  8px transparent grey border */
  padding:8px;
}

/* Title area */
.promptBox .promptTitle {
  
  /* Width of our box image
  minus the padding for the
  border above */
  width:360px;
  height:46px;
  
  /* Table cell allows us
  to verticaly center text */
  display : table-cell;
  text-align: center;
  vertical-align : middle;
  font-size:14px;
}

/* Prompt message content holder */
.promptBox .promptContent {
  width:360px;
  height:78px;
  
  display : block;
}

/* Prompt message content */
.promptBox .promptContent p {
  width:360px;
  height:78px;
  
  display : table-cell;
  text-align: center;  
  vertical-align : middle;
  
  font-size: 13px;
}

/* Prompt buttons */
.promptBox .promptButton {
  width:142px;
  height:37px;
  border:none;
  bottom:35px;
  
  font-size:13px;
  margin:0; padding:0;
  
  text-align: left;
  
  /* We allow for bottom padding as the
  button images have a bottom shadow we
  want the text vertically centered */
  padding: 0 0 5px 35px;
  
  color:#fff;
  text-shadow: #666 1px 1px 1px;  
  cursor:pointer;
}

/* Yes Button */
.promptBox .promptButton.YesButton {
  position:absolute;
  left:42px;
  background:url(buttons.png);
}

/* No Button */
.promptBox .promptButton.NoButton {
  position:absolute;
  
  /* -150px shows the right part of
  the button image 'sprite' */
  background:url(buttons.png) -150px 0;  
  left:192px;
}

Our HTML5 document isn’t aware of the CSS document we’ve just created yet so we need to tell it how to find it. This is done by referencing the CSS file within the <HEAD> section of our document:

<link href="modal.css" rel="stylesheet" />

Save the HTML5 & CSS documents in the same folder as you saved the buttons.

Step three – Add the jQuery

Adding the jQuery is fairly straight forward. We reference the main jQuery file from Google & also the library we downloaded from the jQuery tools site in the <head> section of the document like so:

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

We then add custom jQuery code to the <head> section to listen for users clicking on the button / link that we want to show the box when clicked. The code also needs to listen for clicks on the two buttons contained within the box, we listen for all three of these events like this:

<script type="text/javascript">
        $(document).ready(function () {
                var triggers = $("#launch").overlay({

                        mask: {
                                color: '#000',
                                loadSpeed: 200,
                                opacity: 0.4
                        },
                        target: '#myModal',
                        closeOnClick: false
                });

                $(".promptButton.YesButton").click(function(){
                    $('#launch').html("Formatted, click to try again.");
                });
                
                $(".promptButton.NoButton").click(function(){
                    $('#launch').html("Ok we didn't format it, click to try again.");
                });
        });
    </script>

Your finished HTML document should look like this:

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.tools.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
                var triggers = $("#launch").overlay({

                        mask: {
                                color: '#000',
                                loadSpeed: 200,
                                opacity: 0.4
                        },
                        target: '#myModal',
                        closeOnClick: false
                });

                $(".promptButton.YesButton").click(function(){
                    $('#launch').html("Formatted, click to try again.");
                });
                
                $(".promptButton.NoButton").click(function(){
                    $('#launch').html("Ok we didn't format it, click to try again.");
                });
        });
    </script>
    <link href="modal.css" rel="stylesheet" />
</head>

<body>
    <a id="launch" href="#">Launch Modal</a>
    
    <div id="myModal">
        <span>Are you sure you want to do that?</span>
        <div><p>Format hard disk?</p></div>
        <button>Yes, do it now</button>
        <button>No, I'm insane</button>
    </div>

</body>
</html>

Providing everything is in the right place you can open the document in your browser, click the link, and you should see the popup box. You can download a working demo above, as always, comment if you have any questions.

Are you sure you want to do that?

Format hard disk?