Диалог Dijit в JSFiddle запускается сразу, а не onClick

Есть пара вопросов.

1) Как указывали другие, вы вызываете функцию, а не настраиваете событие с помощью функции. следовательно, диалог виден при загрузке.

2) Вам нужно дождаться, пока html не будет проанализирован. или вам нужно использовать parser.parse()

Вот обновленный скрипт: http://jsfiddle.net/49y3rxzg/9/

() – это оператор вызова. Вы сами вызываете функцию, и возвращаемое значение функции устанавливается в качестве обработчика события. Если вы хотите повторно использовать функцию, используйте замыкание:

function launchSelectDialog(selectOptions) {
    // the returned function will be used as the event handler
    return function() {
       // the passed `selectOptions` is remembered in this context
    }
}

Другой вариант:

registry.byId("default-launch", "onClick", function() {
   launchSelectDialog(allOpts);
});

Вам нужно инициировать виджет Button перед получением с помощью registry.byId(). В вашем коде на самом деле registry.byId("default-launch") возвращал undefined;

Также функция registry.byId() принимает только id, поэтому дополнительные параметры будут игнорироваться.

Чтобы исправить это, вы должны правильно инициировать экземпляр Button и объявить launchSelectDialog(allOpts) внутриonClick как:

  var myButton = new Button({
    label: "Default Options",
    onClick: function() {
      launchSelectDialog(allOpts);
    }
  }, "default-launch");

Ниже исправлена ​​версия для вашего скрипта.

http://jsfiddle.net/usm829jq/

require([
  "dojo/dom",
  "dijit/Dialog",
  "dijit/form/Button",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/registry",
  "dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane, registry) {

  var allOpts = [{
    label: "Foo",
    value: "foo"
  }, {
    label: "Bar",
    value: "bar"
  }]

  var myButton = new Button({
    label: "Default Options",
    onClick: function() {
      launchSelectDialog(allOpts);
    }
  }, "default-launch");


  function launchSelectDialog(SelectOptions) {
    var layout = new BorderContainer({
      design: "headline",
      style: "width: 400px; height: 400px; background-color: yellow;"
    });

    var centerPane = new ContentPane({
      region: "center",
      style: "background-color: green;",
      content: "center"
    });

    var actionPane = new ContentPane({
      region: "bottom",
      style: "background-color: blue;"
    });

    (new Button({
      label: "OK"
    })).placeAt(actionPane.containerNode);
    (new Button({
      label: "Cancel"
    })).placeAt(actionPane.containerNode);

    layout.addChild(centerPane);
    layout.addChild(actionPane);
    layout.startup();

    var dialog = new DijitDialog({
      title: 'dialog title',
      style: {
        //width: '400px',
        //height: '400px',
      },
      content: layout
    });

    dialog.containerNode.style.backgroundColor = "red";
    dialog.startup();
    dialog.show();

  }
})