dialog position

position dialog to a named container

by Edgar Martinez

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

<div id="scroller" class="scrollers">this is my scroller</div>

<div id="dialog" title="Basic dialog no title" style="display:none">     <p>This is the default dialog which is useful for displaying information.</p> </div>

<button id="open">Open</button>
<button id="closeit">Close</button>

CSS

.noTitleBar .ui-dialog-titlebar {
    display:none;
}
.scrollers {
    width: 350px;
    height: 450px;
    border: 1px solid orange;
    top: 250px;
    left: 100px;
    position: relative;
}

JavaScript

$("#dialog").dialog({
    autoOpen: false,
    dialogClass: 'notitleBar',
    position: {
        my: "center",
        at: "bottom",
        of: $('#scroller')
    },
    show: {
        effect: "blind",
        duration: 1000
    }
});


$('#open').click(function() {
    $("#dialog").dialog("open");
});


$('#closeit').click(function() {
    $("#dialog").dialog("close");
});