react

import * as React from 'react';
import { useState } from 'react';
import { Dialog, DialogType, DialogFooter, PrimaryButton } from 'office-ui-fabric-react';

const MyComponent: React.FC = () => {
  const [isDialogVisible, setIsDialogVisible] = useState(false);

  const openDialog = () => {
    setIsDialogVisible(true);
  }

  const closeDialog = () => {
    setIsDialogVisible(false);
  }

  return (
    <div>
      <a href="#" onClick={openDialog}>リンクをクリック</a>

      <Dialog
        hidden={!isDialogVisible}
        onDismiss={closeDialog}
        dialogContentProps={{
          type: DialogType.normal,
          title: 'ダイアログのタイトル',
          subText: 'ダイアログの内容をここに表示します。',
        }}
        modalProps={{
          isBlocking: false,
          styles: { main: { maxWidth: 450 } },
        }}
      >
        <DialogFooter>
          <PrimaryButton onClick={closeDialog} text="閉じる" />
        </DialogFooter>
      </Dialog>
    </div>
  );
}

export default MyComponent;