Jquery Popup Screen

This is a simple popup screen using jquery dialog with blueopal theme and maximize icon.

by asifmohammed

HTML

<input type="button" value="Show Popup" id="showPopup"/>

<div id="popup_widget" style="display:none;">
  <div> Some Content inside the popup
   </div>
</div>

CSS

.ui-helper-hidden {
    display: none;
}
.ui-helper-hidden-accessible {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
.ui-helper-reset {
    border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}
.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.ui-helper-clearfix {
    display: inline-block;
}
* html .ui-helper-clearfix {
    height: 1%;
}
.ui-helper-clearfix {
    display: block;
}
.ui-helper-zfix {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.ui-state-disabled {
    cursor: default !important;
}
.ui-icon {
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -99999px;
}
.ui-widget-overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.ui-widget {
    font-family: Arial,Lucida Grande,Lucida Sans,sans-serif;
    font-size: 1em;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Arial,Lucida Grande,Lucida Sans,sans-serif;
    font-size: 1em;
}
.ui-widget-content {
    background: url("images/ui-bg_inset-hard_100_fcfdfd_1x100.png") repeat-x scroll 50% bottom #FCFDFD;
    border: 1px solid #ACACAC;
    color: #292629;
}
.ui-widget-content a {
    color: #292629;
}
.ui-widget-header {
    background: url("http://www.chicagononprofit.org/public/css/redmond/images/ui-bg_glass_85_dfeffc_1x400.png/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png") repeat-x scroll 50% 50% #5C9CCC;
    border: 1px solid #4297D7;
    color: #FFFFFF;
    font-weight: normal;
}
.ui-widget-header a {
    color: #FFFFFF;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background:...

JavaScript

$("#showPopup").click(function() {
    var $popUp = $("#popup_widget");
    $popUp.dialog({
        title: 'New Popup',
        modal: true,
        resizable: false,
        autoResize: true,
        draggable: true,
        buttons:{
            OK:function(){
                $(this).dialog('close');
            }
        },
        open:function(event){
            
        },
        close:function(event){
            $("#maximize_link").remove();
        }
    });
    $popUp.show().dialog('open');
    
    var maximizeIconDisplay = [];
    maximizeIconDisplay.push("<a class='dialog-maximize' id='maximize_link' href='javascript:void(0);'>");
    maximizeIconDisplay.push("<span class='dialog-maximize-span ui-icon-arrow-4-diag'/></a>");
    $("#ui-dialog-title-popup_widget").after(maximizeIconDisplay.join(''));
    $("#maximize_link").click(function (e) {
        alert("This will maximize");
    });    
});