Blog / 2010 / March / 11

Dynamic CSS popup with jQuery

March 11, 2010

Here's some code that will grey out a web page, then popup a small div on top. You can then do things with this div as you see fit - show a message to the user etc.

HTML

Here's a delete link in the code, I've added a class="confirmdelete" onto it.

<td>[<a class="confirmdelete" href="/users/{{user.username}}/delete/">delete</a>]</td>

JavaScript

Here's the jQuery code for when the link is clicked.

First of all we create a blanket over the existing web page

$('a.confirmdelete').click(function(){
  $('<div id="blanket"></div>').css({
    "background-color" : "#111",
    "opacity" : "0.65",
    "position": "fixed",
    "z-index" : "9001",
    "top" : "0px",
    "left" : "0px",
    "width" : "100%",
    "height" : "100%"}).appendTo("#content");

Next, we create our popup window on top of that blanket

  $('<div id="confirm"></div>').css({
    "position" : "fixed",
    "background-color" : "#eee",
    "width" : "300px",
    "height" : "300px",
    "z-index" : "9002",
    "top" : "150px",
    "left" : (($(document).width() - 300) / 2)}).appendTo("#content");

Notice that the top is fixed, but the left hand side of the popup box is based on the width of the page, minus the width of the popup, divided by two.

Next, we add a close button, and attach some code to remove the blanket and popup when it is clicked.

  $('#confirm').html('<a id="closebutton">close</a>');
  $('#closebutton').click(function(){
    $('#confirm').remove();
    $('#blanket').remove();
  });
  return false;
});

Unobtrusive JavaScript / Progressive Enhancement

At the bottom of the function, we return false to prevent the a href link from being navigated to. This means that in a browser with JavaScript disabled, the href link will be used. Where JavaScript is available, the popup will be shown instead, and we can use it to allow the user to carry out the delete, or to cancel.

Split CSS and JavaScript

This example builds on that outlined above. It loads in a HTML fragment into the popup frame using the jQuery load() function. You can dismiss the popup by simply clicking anywhere on the background away from it. It will also open near the element that was clicked on to start it.

CSS

Here's the CSS required to implement this solution

#blanket {
    background-color : #111;
    opacity : 0.65;
    position: fixed;
    z-index : 9001;
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
}

#popup {
    position : fixed;
    background-color : #eee;
    width : 300px;
    height : 350px;
    z-index : 9002;
    top : 150px;
    left : 500px;
    margin: auto;
    overflow: scroll;
    border: 5px solid black;
    padding: 5px;
}

Note that the height here is set to 350px - this figure is used in the JavaScript below.

JavaScript

This code works out the serial of the thing to show in the popup from the id of the item that was clicked. This serial is then used as part of the URL, along with the prefix and suffix passed in. This URL is then requested and the HTML fragment returned is shown in the popup.

function open_dialog(pLink, pUrlPrefix, pUrlSuffix) {
    var lSerial = pLink.attr('id').substring(pLink.attr('id').indexOf('-')+1);
    var lUrl = pUrlPrefix + lSerial + '/' + pUrlSuffix;
    $('<div id="blanket"></div><div id="popup"></div>').appendTo('#wrapper');
    $('#blanket').bind('click', function(){
            $('#popup').remove();
            $('#blanket').remove();
            if (window.needs_refresh){
                window.needs_refresh = false;
                location.reload();
            }
    });
    var lLeft = pLink.offset().left + "px";
    var lTop = pLink.offset().top + "px";
    var lHeight = $(window).height();
    if (pLink.offset().top > lHeight - 350) {
            lTop = lHeight - 350 + "px";
    } 
    $('#popup').css('top',lTop).css('left',lLeft).load(lUrl);    
}

Tags: css jquery lightbox