Hello Dojo

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<h1 id="greeting">Using Wijmo</h1>
<div id="dialogOne">
	<div class="wj-dialog-header">
		The First Dialog Header
  </div>
  <div class="wj-dialog-body">
    <p>This is the first of 3 dialogs that are rendered when the page loads.</p>
    <p>This is a test to check the status of the page overlay<br />
		that appears when the dialog is rendered.</p>
  </div>
  <div class="wj-dialog-footer">
    <button class="btn btn-default wj-hide-ok">OK</button>
    <button class="btn btn-default wj-hide-cancel">Cancel</button>
  </div>
</div>
<div id="dialogTwo">
	<div class="wj-dialog-header">
		The First Dialog Header
  </div>
  <div class="wj-dialog-body">
    <p>This is the second of 3 dialogs that are rendered when the page loads.</p>
    <p>This is a test to check the status of the page overlay<br />
		that appears when the dialog is rendered.</p>
  </div>
  <div class="wj-dialog-footer">
    <button id="displayDialog" class="btn btn-default">Display New Dialog</button>
    <button class="btn btn-default wj-hide-cancel">Cancel</button>
  </div>
</div>
<div id="dialogThree">
	<div class="wj-dialog-header">
		The First Dialog Header
  </div>
  <div class="wj-dialog-body">
    <p>This is the third of 3 dialogs that are rendered when the page loads.</p>
    <p>This is a test to check the status of the page overlay<br />
		that appears when the dialog is rendered.</p>
  </div>
  <div class="wj-dialog-footer">
    <button class="btn btn-default wj-hide-ok">OK</button>
    <button class="btn btn-default wj-hide-cancel">Cancel</button>
  </div>
</div>

CSS

h1 {
    font-family: Helvetica, sans-serif;
}

JavaScript

require([
    'dojo/dom',
    'dojo/domReady!'
], function (dom) {
    var greeting = dom.byId('greeting');
    greeting.innerHTML += ' with Dojo!';
		var dialogOne = new wijmo.input.Popup('#dialogOne');
		//dialogOne.show(true);
		var dialogTwo = new wijmo.input.Popup('#dialogTwo');
		dialogTwo.show(true);
		var dialogThree = new wijmo.input.Popup('#dialogThree');
		dialogThree.show(true);
		
		document.getElementById("displayDialog").addEventListener("click", function() {
			dialogOne.show(true);
		})
});