Dialog


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() }
              dialogContentProps={{
                type: DialogType.normal,
                title: 'Dialog Box Title',
                subText: 'dialog box message description.'
              }}
              modalProps={{
                 isBlocking: true,
                 containerClassName: 'ms-dialogMainOverride'
              }}
           >
              <DialogFooter>
                 <PrimaryButton
                    text= { 'Save Button' }
                    onClick={ () => alert('Button clicked') }
                 />
              </DialogFooter>
           </Dialog>
        </div>
      );
 
    }
}


© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext