Delayed Dialog jq-ui

by James Doyle

HTML

<h1 onclick="$('#dialog').dialog();">click to re-launch</h1>
<div id="dialog" class="noshow" title="Dialog Title">
    <h1>Content</h1>
    <p>Here is the content for this dialog box. This is a sentence.</p>
</div>

CSS

.noshow {
    visibility:hidden;
}
#dialog {
    
}
#dialog h1 {
    font-size:3em;
}
.ui-dialog-titlebar-close {
    float: right;
}
.ui-widget {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 5px 15px;
    box-shadow: 0px 0px 25px #000;
}

JavaScript

$(document).ready(function() {
    setTimeout(function() {
        $("#dialog").dialog({
            show: 'fade',//transition type
            width: 400,//dialog overall width
            height: 200,//overall height
            modal: true,
        });
        $("#dialog").removeClass("noshow");
    }, 1000); //delay time
});