0

I'm currently using the MS Fluent UI controls (formerly known as Office Fabric UI | https://developer.microsoft.com/en-us/fluentui#/controls/web) and I'm getting stuck with the 'Modal' control.

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.

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).

Is there any way of simply setting it to "center on the (visible) window"?

Below is a snippet from the React Component which hosts the Document Card and Modal dialog.. 

return (
    <DocumentCard onClick={showModal}>
        <DocumentCardTitle title={this.props.Title} shouldTruncate />
        <Image {...imageProps} className={styles.image} />
        <DocumentCardTitle title={this.props.event.Description} 
                           shouldTruncate showAsSecondaryTitle />
         <Modal isOpen={isModalOpen} onDismiss={hideModal} isBlocking={true}>
            <div>
                <span id={titleId}>{this.props.Title}</span>
            </div>
            <div>
                <p>
                    {this.props.event.Description}
                </p>
           </div>
        </Modal>
    </DocumentCard>
);
4

1 回答 1

1

我认为您只需要从 DocumentCard 中提出模态。以下可能是您正在寻找的

return (
  <>
    <DocumentCard onClick={showModal}>
      <DocumentCardTitle title={this.props.Title} shouldTruncate />
      <Image {...imageProps} className={styles.image} />
      <DocumentCardTitle title={this.props.event.Description} shouldTruncate showAsSecondaryTitle />
    </DocumentCard>

    <Modal isOpen={isModalOpen} onDismiss={hideModal} isBlocking={true}>
      <div>
        <span id={titleId}>{this.props.Title}</span>
      </div>
      <div>
        <p>{this.props.event.Description}</p>
      </div>
    </Modal>
  </>
);
于 2020-07-13T14:51:52.550 回答