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>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic 
            typesetting, remaining essentially unchanged. It was popularised in the 1960s 
            with the release of Letraset sheets containing Lorem Ipsum passages, and more 
            recently with desktop publishing software like Aldus PageMaker including versions of 
            Lorem Ipsum.
        </p>
        <br/>
        <p><a href="#" id="close">CLOSE</a></p>
    </div>

    ......
    
</div>

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() {
        centerDialog(); 

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

    $('#close').click(function() {
        $('#dimmer, #dialog').fadeOut();
    });
});

Result

The demo creates this screenshot: