jQuery & jQueryUI Base

by Meily Chhon

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js"></script>
<div id="dialog">
    Test 123123123
</div>
<div class="mask">
</div>

CSS

.ui-dialog button.custom { background: orange }
.mask{
    background: #000;
    opacity: 0.4;
    position: absolute;
    width: 100%;
    height: 100%;
}

JavaScript

$("#dialog").dialog({
    buttons: {
        'Confirm': function() {
            //do something
            $(this).dialog('close');
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    create:function () {
        $(this).closest(".ui-dialog").find(".ui-button:first").addClass("custom");
        $(this).closest(".ui-dialog").find(".ui-corner-all").click(function(){
            $(".mask").fadeOut("fast");
        });
        
    }
});