Modal

link - developer.microsoft.com/en-us/fluentui#/controls/web/modal
A Modal is a large pop-up that takes focus from the page or app and requires the user to interact with it.
It is primarily used for entering data or changing user preferences without an app.
For small dialog boxes you should use the [[Dialog component]]

import * as React from 'react';  
import { useId, useBoolean } from '@fluentui/react-hooks';  
import { 
  getTheme, 
  mergeStyleSets, 
  FontWeights, 
  ContextualMenu, 
  Toggle, 
  Modal, 
  IDragOptions, 
  IIconProps, 
  Stack, 
  IStackProps, 
} from '@fluentui/react';  
import { DefaultButton, IconButton, IButtonStyles } from '@fluentui/react/lib/Button';  

const cancelIcon: IIconProps = { iconName: 'Cancel' };  

const theme = getTheme(); 
const contentStyles = mergeStyleSets({ 
  container: { 
    display: 'flex',  
    flexFlow: 'column nowrap', 
    alignItems: 'stretch',  
  }, 
  header: [ 
    // eslint-disable-next-line deprecation/deprecation 
    theme.fonts.xLargePlus, 
    { 
      flex: '1 1 auto', 
      borderTop: `4px solid ${theme.palette.themePrimary}`, 
      color: theme.palette.neutralPrimary, 
      display: 'flex',  
      alignItems: 'center',  
      fontWeight: FontWeights.semibold, 
      padding: '12px 12px 14px 24px', 
    }, 
  ], 
  body: { 
    flex: '4 4 auto', 
    padding: '0 24px 24px 24px', 
    overflowY: 'hidden',  
    selectors: { 
      p: { margin: '14px 0' }, 
      'p:first-child': { marginTop: 0 },
      'p:last-child': { marginBottom: 0 },
    }, 
  }, 
}); 
const stackProps: Partial<IStackProps> = { 
  horizontal: true, 
  tokens: { childrenGap: 40 }, 
  styles: { root: { marginBottom: 20 } }, 
}; 
const iconButtonStyles: Partial<IButtonStyles> = { 
  root: { 
    color: theme.palette.neutralPrimary, 
    marginLeft: 'auto',  
    marginTop: '4px',  
    marginRight: '2px',  
  }, 
  rootHovered: { 
    color: theme.palette.neutralDark, 
  }, 
}; 

export const ModalBasicExample: React.FunctionComponent = () => { 
  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false); 
  const [isDraggable, { toggle: toggleIsDraggable }] = useBoolean(false); 
  const [keepInBounds, { toggle: toggleKeepInBounds }] = useBoolean(false); 
  // Normally the drag options would be in a constant, but here the toggle can modify keepInBounds 
  const dragOptions = React.useMemo( 
    (): IDragOptions => ({ 
      moveMenuItemText: 'Move',  
      closeMenuItemText: 'Close',  
      menu: ContextualMenu, 
      keepInBounds, 
    }), 
    [keepInBounds], 
  ); 

  const titleId = useId('title');  

  return ( 
    <div> 
      <Stack {...stackProps}> 
        <Toggle label="Is draggable" inlineLabel onChange={toggleIsDraggable} checked={isDraggable} /> 
        <Toggle 
          label="Keep in bounds" 
          inlineLabel 
          onChange={toggleKeepInBounds} 
          checked={keepInBounds} 
          disabled={!isDraggable} 
        /> 
      </Stack> 

      <DefaultButton onClick={showModal} text="Open Modal" /> 
      <Modal 
        titleAriaId={titleId} 
        isOpen={isModalOpen} 
        onDismiss={hideModal} 
        isBlocking={false} 
        containerClassName={contentStyles.container} 
        dragOptions={isDraggable ? dragOptions : undefined} 
      > 
        <div className={contentStyles.header}> 
          <span id={titleId}>Lorem Ipsum</span> 
          <IconButton 
            styles={iconButtonStyles} 
            iconProps={cancelIcon} 
            ariaLabel="Close popup modal" 
            onClick={hideModal} 
          /> 
        </div> 
        <div className={contentStyles.body}> 
          <p> 
            some text 
          </p> 
          <p> 
            some text 
          </p> 
          <p> 
            some text 
          </p> 
        </div> 
      </Modal> 
    </div> 
  ); 
};