title: Office UI Fabric JS Dialog Component
body: <p>I'm currently using Office-UI-Fabric-JS to build a UI for an Outlook Web Add-In.   I will eventually switch over to React.</p>
  
  <p>I've gone over the examples and what I'm not clear about is from where will the HTML for the Dialog box reside?</p>
  
  <p>Calling the Fabric Dialog's "open" API from a TaskPane centers the Dialog within the TaskPane.  I would like it centered on the screen.</p>
  
  <p>However, I'm not sure where the HTML for the dialog should go?</p>
  
  <p>Do I put it in the non-UI Html file  ("FunctionFile.html"), then use div tags?</p>
  
  <p>Do I create an entirely separate HTML page, then load that HTML using Javascript (window.location = "mydialog.html")?</p>
  
  <p>HERE'S A SAMPLE (Where would this HTML go?)</p>
  
  <pre><code>    &lt;div class="docs-DialogExample-default"&gt;
        &lt;div class="ms-Dialog"&gt;
          &lt;div class="ms-Dialog-title"&gt;All emails together&lt;/div&gt;
            &lt;div class="ms-Dialog-content"&gt;
              &lt;p class="ms-Dialog-subText"&gt;Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.&lt;/p&gt;
            &lt;div class="ms-CheckBox"&gt;
           &lt;input tabindex="-1" type="checkbox" class="ms-CheckBox-input"&gt;
          &lt;label role="checkbox" ...&gt;
            &lt;span class="ms-Label"&gt;Option1&lt;/span&gt; 
          &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="ms-CheckBox"&gt;
          &lt;input tabindex="-1" type="checkbox" class="ms-CheckBox-input"&gt;
          &lt;label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-       checked="false" name="checkboxa"&gt;
            &lt;span class="ms-Label"&gt;Option2&lt;/span&gt; 
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ms-Dialog-actions"&gt;
        &lt;button class="ms-Button ms-Dialog-action ms-Button--primary"&gt;
          &lt;span class="ms-Button-label"&gt;Save&lt;/span&gt; 
        &lt;/button&gt;
        &lt;button class="ms-Button ms-Dialog-action"&gt;
          &lt;span class="ms-Button-label"&gt;Cancel&lt;/span&gt; 
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;button class="ms-Button docs-DialogExample-button"&gt;Open Dialog&lt;/button&gt;
      &lt;label class="docs-DialogExample-label"&gt;&lt;/label&gt;
    &lt;/div&gt;
  </code></pre>