Question

So My first though was, that adding more, and more HTML elements is not a way to go, and I come up with this solution

    var Jaxi = {
        CurrentLocation: '/',
        showLoginDialog: function () {
        dojo.place('<div data-dojo-type="dijit.Dialog" style="width:600px;" id="loginDialog"><div id="dialog-content"></div><a href="javascript:Jaxi.CloseDialog()">Close</div>', dojo.body())
            dojo.xhrGet({
                url: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
                load: function (result) {
                    dojo.byId("dialog-content").innerHTML = result;
                }
            });
            dojo.ready(function () {
                dijit.byId("loginDialog").show();
            });
        },
        CloseDialog: function () {
            dijit.byId("loginDialog").hide();
            dojo.destroy("loginDialog");
        }
    };

It’s working.. To some degree at least. Dialog open, but no styles are appiled. But moreover I can’t close dialog.
Question Is how to make it working ?

Answer 1

After you have placed the div in your body, Dojo needs to parse the HTML to “notice” the new widget. When it notices the data-dojo-type attribute it says “Hey, here’s a widget, I need to make this into a beautiful Dialog”.

showLoginDialog: function () {
    dojo.place('<div data-dojo-type="dijit.Dialog" ....</div>', dojo.body());
    dojo.parser.parse();
    ....

Of course, you also have to make sure your body tag has class="claro" (or any other theme you want to use).

That being said, I personally think this is a little messy way to make a dialog box. You are sort of mixing declarative with programmatic. I’m not sure what you mean by “My first though was, that adding more, and more HTML elements is not a way to go“, but in my own opinion mixing HTML inside your javascript makes the code difficult to read. You may want to take a look at this sitepen article if you want a clean way to separate HTML and Javascript.