How to build a dialog using CSS and jQuery

Published on: March 29, 2014 Written by: Thokozani Mhlongo

Dialogs are the best way of displaying critical information. Whether its an alert to save something before continuing or to introduce something useful, they are a great way to shift focus. Here we will be building one from scratch with the help of CSS and jQuery, so let's get started.

Styling the dimmer and the dialog

/*======== GENERAL STYLE ===========*/
body {
    background: #efefef;
    padding: 0 10%;
    margin: 0;
    font-size: 16px;
    font-family: Arial;
a {
    background: #00a2a0;
    color: white;
    padding: 1% 4%;
    text-decoration: none;
    border-radius: 60px;

/*=================== DIMMER STYLE =================*/
#dimmer {
    background: #fff;
    position: absolute;
    width: 100%; /*  Makes it fills the screen horizontally */
    height: 100%; /*  Makes it fills the screen vertically */
    top: 0;
    left: 0;
    z-index: 100; /* To cover the content */
    display: none; /* Hide it when page is loaded. Will be viewed on button press */

/* ================== DIALOG STYLE =============== */
#dialog {
    position: absolute;
    z-index: 101; /* Makes it above everything including the #dimmer */
    background: #fff;
    border: 8px solid #00a2a0;
    padding: 0% 2%;
    width: 500px;
    border-radius: 4px;
    display: none; /* Hide it when page is loaded. Also viewed on button press */

#dialog h1 {
    font-size: 18pt;
    color: #00a2a0;
    border-bottom: 1px solid rgba(22,140, 147, 0.3);

#dialog p {
    font-size: 12px;

#dialog #close {
    font-weight: bold;

What's interesting about this stylesheet is the the dialog and dimmer rules. They both have a position of absolute which makes move them around the screen using the top , left, bottom, right CSS properties. Our dimmer is set to top = 0, and left = 0; and then we set the width and height 10 100% so that it fills the screen. The background is set to white and the its opacity will be toggled in jQuery code. Another vital part here is the z-index, it lets these floating elements to be top-most of other content. The element with the highest value is the one that'll be displayed in front of everything (in this case our dialog).

Our HTML markup

<div class="content">
    <a href="#" id="showDialog">Load dialog</a>

    <!-- Our dimmer -->
    <div id="dimmer">&nbsp;</div>

    <!-- Our dialog -->
    <div id="dialog">
        <h1>Lorem Ipsum</h1>
            typesetting, remaining essentially unchanged. It was popularised in the 1960s 
            recently with desktop publishing software like Aldus PageMaker including versions of 
            Lorem Ipsum.
        <p><a href="#" id="close">CLOSE</a></p>


The jQuery code

Step 1. Build a function for centering the dialog

function centerDialog() {
    var screenWidth = $(window).width(); //Get window width
    var screenHeight = $(window).height(); //Get window height

    var dialogWidth = $('#dialog').width();
    var dialogHeight = $('#dialog').height();

    var dialogTop = ((screenHeight / 2) - (dialogHeight / 2));
    var dialogLeft = ((screenWidth / 2) - (dialogWidth / 2));

    $('#dialog').css({ 'top' : dialogTop , 'left' : dialogLeft }); //Adjusting top-left starting point of dialog

Step 2. Add the code to show and hide the dialog

$(document).ready(function() {
    $('#showDialog').click(function() {

        $('#dimmer').fadeTo(500, 0.7); //Show while changing dimmer opacity to 0.7

        $('#dimmer, #dialog').fadeOut();


The demo creates this screenshot: