title: Office Fluent UI / Fabric UI Modal - how can I control where it appears?
body: <p>I'm currently using the MS Fluent UI controls (formerly known as Office Fabric UI |  <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/fluentui#/controls/web</a>) and I'm getting stuck with the 'Modal' control. </p>
  
  <p>I am triggering a Modal dialog control as the onClick event for a DocumentCard control. The problem is I can't see any way to keep the new model dialog centred on the screen. </p>
  
  <p>It appears to always center on the element which contains all of the document cards (and there are a lot of cards.. so you end up having to scroll down quite a lot to see the modal dialog). </p>
  
  <p>Is there any way of simply setting it to "center on the (visible) window"? </p>
  
  <p>Below is a snippet from the React Component which hosts the Document Card and Modal dialog.. </p>
  
  <pre><code>return (
      &lt;DocumentCard onClick={showModal}&gt;
          &lt;DocumentCardTitle title={this.props.Title} shouldTruncate /&gt;
          &lt;Image {...imageProps} className={styles.image} /&gt;
          &lt;DocumentCardTitle title={this.props.event.Description} 
                             shouldTruncate showAsSecondaryTitle /&gt;
           &lt;Modal isOpen={isModalOpen} onDismiss={hideModal} isBlocking={true}&gt;
              &lt;div&gt;
                  &lt;span id={titleId}&gt;{this.props.Title}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;p&gt;
                      {this.props.event.Description}
                  &lt;/p&gt;
             &lt;/div&gt;
          &lt;/Modal&gt;
      &lt;/DocumentCard&gt;
  );
  </code></pre>