Dialog

link - developer.microsoft.com/en-us/fluentui#/controls/web/dialog
A Dialog is a small pop-up that takes focus from the page or app and requires the user to interact with it.
It is primarily used for confirming actions, such as deleting files or asking the user to make a choice.
For large/complicated dialog boxes you should use the [[Modal component]]

import React, { Component } from 'react'  
import {Fabric} from 'office-ui-fabric-react/lib/Fabric'  
import {Button, ButtonType} from 'office-ui-fabric-react/lib/Button'  
import {Dialog, DialogType, DialogFooter} from 'office-ui-fabric-react/lib/Dialog'  

class App extends Component { 
  constructor() { 
    super() 
    this.state = { 
      isOpen: false, 
    } 
  } 

  open = () => this.setState({isOpen: true}) 

  close = () => this.setState({isOpen: false}) 

  render() { 
    return ( 
      <Fabric className="App"> 
        <div style={{margin: '5em'}}>  
          <Button onClick={this.open}>I am a button.</Button> 
        </div> 
        <Dialog 
          isOpen={this.state.isOpen} 
          type={DialogType.close} 
          onDismiss={this.close.bind(this)} 
          title='Dialog title' 
          subText='Dialog subText' 
          isBlocking={false} 
          closeButtonAriaLabel='Close'  
        > 
          <h1>Hello, World!</h1> 
          <DialogFooter> 
            <Button buttonType={ButtonType.primary} onClick={this.close}>OK</Button> 
          </DialogFooter> 
        </Dialog> 
      </Fabric> 
    ) 
  } 
} 

export class BETDialogBlocking extends React.Component { 
  constructor(props) { 
    super(props); 

    this.state = { hideDialog: true }; 

    this.handleClose = this.handleClose.bind(this); 
  } 

    handleclose(event) { 
       this.setState({hideDialog: true }); 
    }; 


    render() { 

      return ( 
        <div> 
           <Dialog 
              hidden={this.state.hideDialog} 
              onDismiss={ () => this.closeDialog() } 
          // minWidth={400} 
          // maxWidth={400} 
              dialogContentProps={{ 
                showCloseButton: true, 
                type: DialogType.normal, 
                title: 'Dialog Box Title', 
                subText: 'dialog box message description.' 
              }} 
              modalProps={{ 
                 isBlocking: true, 
                 styles: { main: { maxWidth: 450 } }, 
                 dragOptions: { 
                   moveMenuItemText: 'Move',  
                   closeMenuItemText: 'Close',  
                   menu: ContextualMenu, 
                 }, 
                 containerClassName: 'ms-dialogMainOverride'  
              }} 
           > 
              <DialogFooter> 
                 <PrimaryButton 
                    text= { 'Save Button' } 
                    onClick={ () => alert('Button clicked') } 
                 /> 
              </DialogFooter> 
           </Dialog> 
        </div> 
      );   
 
    } 
}