Dojo Dialog positioning example

gistfile1.js

/**
 * Created by tchapin on 9/23/2014.
 */
require([
    "dojo/aspect",
    "dojo/dom-style",
    "dojo/on",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dijit/form/Button",
    "dijit/Dialog"
], function(aspect, domStyle, on, declare, lang, Button, Dialog){
    var standardDialog = declare([Dialog], {
        title: null,
        content: null,
        class: null,
        width: null,
        height: null,
        left: null,
        top: null,
        constructor: function(options) {
            //set up the dialog based on the options provided or use defaults
            this.title = options.title || "default title";
            this.content = options.content || "no content provided";
            this.class = options.class || "ModalDialog"; //in the css .modalDialog_underlay {display: block;}
            this.width = options.width || 300;
            this.height = options.height || 300;
            this.left = options.left || 50;
            this.top = options.top || 50;
        },
        startup: function(){
            //size the dialog
            domStyle.set(this.domNode, {
                width: this.width + "px",
                height: this.height + "px"
            });
            //after the onShow event, set the position
            aspect.after(this, "show", function(){
                domStyle.set(this.domNode, {
                    left: this.left + "px",
                    top: this.top + "px"
                });
            });
            //before the onHide event, save the position
            aspect.before(this, "hide", function(){
                this.left = domStyle.get(this.domNode, "left");
                this.top = domStyle.get(this.domNode, "top");
            });
        }
    });

    var newDialog = new standardDialog({
        title: "this is the title",
        content: "this is the content",
        class: "nonModalDialog", //in the css .nonModalDialog_underlay {display: none;}
        width: 200,
        height: 300,
        left: 300,
        top: 15
    });
    newDialog.startup();

    var myButton = new Button({
        label: "Click Me",
    });
    on(myButton, "click", function(){newDialog.show();});
    document.body.appendChild(myButton.domNode);
    myButton.startup();

    var anotherDialog = new standardDialog({
        title: "this is another title",
        content: "this is some more content",
        class: "nonModalDialog", //in the css .nonModalDialog_underlay {display: none;}
        width: 300,
        height: 200,
        left: 5,
        top: 200
    });
    anotherDialog.startup();

    var anotherButton = new Button({
        label: "Click Me Too",
    });
    on(anotherButton, "click", function(){anotherDialog.show();});
    document.body.appendChild(anotherButton.domNode);
    anotherButton.startup();
  
});