jQuery Dialog example

by jpeter06

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
</p>
<button id="showDialog">mostrarDialogo</button>
<div id="dialog-message" title="Cambio de Fecha Inicial">
    <div style="margin-left: 23px;">
        <p>
            Para recalcular la fecha de inicio se tiene que recalcular.
        </p></div>
</div>

CSS

body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; }

.ui-dialog-osx {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px;
}

JavaScript

$(document).ready(function(){
    $("#showDialog").click(function(){
       $("#dialog-message").dialog("open");
    });
});


$("#dialog-message").dialog({
    modal: true,
    draggable: true,
    resizable: false,
    autoOpen: false,
    position: ['center', 'center'],
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "continue": function() {
            $(this).dialog("close");
        },
        "cancel": function() {
            $(this).dialog("close");
        }
    }
});