PopUp Dialog Box

by Pratik Bhoir

HTML

<button onClick="openPopup('The Popup!','The popup has been been opened successfully.');">Open PopUp</button>
<br/>
<button onClick="openPopupSuccess('The Popup!','The popup has been been opened successfully.');">Success</button>
<br/>
<button onClick="openPopupError('The Popup!','The popup has been been opened successfully.');">Error</button>
<br/>

CSS

/* ********************* PopUp******************** */
    .PopupOverlay {
        display:none;
        background-color: grey;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 1000;
        opacity: 0.5;
    }
    .Popup {
        display:none;
        position: absolute;
        z-index: 1010;
        width: 500px;
        min-height: 200px;
        top: 100px;
        left: -250px;
        margin-left: 50%;
        background-color: White;
        border-radius: 15px;
        opacity: 1;
        font-family:'Times New Roman';
    }
    .PopupHeader {
        height:20px;
        background-color: #0DAAF9;
        border-radius: 10px 10px 0px 0px;
        box-shadow: 2px 2px 5px #888;
        color: #FFFFFF;
        font-size: 14pt;
        font-weight: bold;
        padding: 10px 10px;
        text-align: center;
    }
    .PopupClose {
        color:black;
        position: absolute;
        top:6px;
        right:6px;
        cursor:pointer;
    }
    .PopupContainer {
        padding: 14px;
        font-size:17px;
        text-align:center;
    }
    .PopupContainerHeader {
        padding-top: 15px;
        font-size:22px;
        text-align:center;
        font-weight: bold;
        color: grey;
        display:none;
    }

JavaScript

$(function () {
    $('body').append("<div class='PopupOverlay'></div>  <div class='Popup'>  <div class='PopupHeader'></div><div class='PopupClose' onclick='closePopup();'><img src='http://dprofiles.com/Images/cancel_icon.png' height='30' width='30' /></div><div class='PopupContainerHeader PopupSuccess'><img src='http://dprofiles.com/Images/green_checkmark.jpg' height='50' width='50' /><br />Done!</div><div class='PopupContainerHeader PopupError'><img src='http://dprofiles.com/Images/warning_icon.png' height='50' width='50' /><br />Error!</div><div class='PopupContainerHeader PopupInfo'><img src='http://dprofiles.com/Images/info_icon.png' height='50' width='50' /><br />Information!</div><div class='PopupContainer'> </div></div>");

});

//+++++++++++++++++Popup open closing functions++++++++++++++++++++++++++
function openPopup(title, message, success) {
    if (title != "undefined") {
        $('.PopupHeader').html(title);
    }
    if (success == true) {
        $('.PopupSuccess').show();
    } else if (success == false) {
        $('.PopupError').show();
    } else {
        $('.PopupInfo').show();
    }
    $('.PopupContainer').html(message);
    $('.PopupOverlay').fadeIn();
    $('.Popup').fadeIn();
}

function openPopupSuccess(title, message) {
    openPopup(title, message, true);
}

function openPopupError(title, message) {
    openPopup(title, message, false);
}

function closePopup() {

    $('.Popup').fadeOut();
    $('.PopupOverlay').fadeOut();
    $('.PopupContainer').children().hide();
    $('.PopupContainerHeader').fadeOut();
}