What's HTMLPLUS?Why HTMLPLUS?UI Components
HTMLPLUS

Dialog

A dialog is a conversation between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.

Usage

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

API

PlusDialog

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
animation
Type
stringstring
Default
undefined
TODO
Name
backdrop
Type
booleanboolean
Default
true
Activate the dialog's backdrop to show or not.
Name
connector
Type
stringstring
Default
undefined
This property helps you to attach which dialog toggler controls the dialog.
It doesn't matter where the dialog toggler is.
You can put the dialog's toggler inside or outside of the dialog.
Read more about connectors here.
Name
fullHeight
Type
booleanboolean
Default
undefined
Set the height of the dialog as much as the screen's height.
Name
fullWidth
Type
booleanboolean
Default
undefined
Set the width of the dialog as much as the screen's width.
Name
fullscreen
Type
"lg-down" | "md-down" | "sm-down" | "xl-down" | "xxl-down" | boolean"lg-down" | "md-down" | "sm-down" | "xl-down" | "xxl-down" | boolean
Default
undefined
Set both width and height of the dialog to occupy the screen size.
Name
keyboard
Type
booleanboolean
Default
true
Closes the dialog when escape key is pressed.
Name
open
Type
booleanboolean
Default
undefined
Control dialog to show or not.
Name
persistent
Type
booleanboolean
Default
undefined
It prevents the dialog from closing on clicking outside of the element.
Name
placement
Type
"bottom" | "center" | "center-bottom" | "center-center" | "center-top" | "end" | "end-bottom" | "end-center" | "end-top" | "left" | "left-bottom" | "left-center" | "left-top" | "right" | "right-bottom" | "right-center" | "right-top" | "start" | "start-bottom" | "start-center" | "start-top" | "top""bottom" | "center" | "center-bottom" | "center-center" | "center-top" | "end" | "end-bottom" | "end-center" | "end-top" | "left" | "left-bottom" | "left-center" | "left-top" | "right" | "right-bottom" | "right-center" | "right-top" | "start" | "start-bottom" | "start-center" | "start-top" | "top"
Default
'top'
Specifies where to show the dialog box by choosing two values, one for horizontal and another for vertical. Horizontal has a range of left, center, right, start, end, and vertical values are top, center and bottom.
Name
portal
  (Experimental)
Type
booleanboolean
Default
undefined
Enables or disables the portal.
Name
portalStrategy
  (Experimental)
Type
"after" | "append" | "before" | "prepend""after" | "append" | "before" | "prepend"
Default
'append'
Specifies the position of the dialog.
Name
portalTarget
  (Experimental)
Type
Node | stringNode | string
Default
'body'
Specifies the position of the dialog relative to the target.
Name
scrollable
Type
booleanboolean
Default
undefined
It makes the user able to scroll the content by adding a scroll beside it.
Name
size
Type
"lg" | "sm" | "xl""lg" | "sm" | "xl"
Default
undefined
Determine the width of the dialog.
Name
sticky
Type
booleanboolean
Default
undefined
Removes the margin around the dialog's content.
Name
default
The default slot.
Name
onClose
When the dialog is going to hide
Value
void
Name
onClosed
When the dialog is completely closed and its animation is completed.
Value
void
Name
onOpen
When the dialog is going to show this event triggers
Value
void
Name
onOpened
When the dialog is completely shown and its animation is completed.
Value
void
Name
backdrop
Backdrop element.

Examples

Below is a collection of simple to complex examples.

Default

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-default">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog connector="dialog-default">      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Animation

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-animation">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-animation">      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Persistent

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-persistent">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-persistent" persistent>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Placement

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-placement">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-placement" placement="center-bottom">      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Size

PreviewScriptStylesandboxEdit on CodeSandbox
import React, { useState } from "react";
import { Grid, Dialog } from "@htmlplus/react";

const App = () => {
  const [open, setOpen] = useState(false);
  const [size, setSize] = useState('md');

  const hide = () => {
    setOpen(false);
  };

  const show = size => {
    setSize(size);
    setOpen(true);
  };

  return <>    
    <Grid justifyContent="center" gutter="md">      
      <Grid.Item xs="12" sm="auto">        
        <button onClick={() => show('sm')}>
          Small dialog
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <button onClick={() => show('lg')}>
          Large dialog
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <button onClick={() => show('xl')}>
          Extra large dialog
        </button>        
      </Grid.Item>      
    </Grid>    
    <Dialog animation="fade" open={open} size={size} onClose={() => hide()}>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <button onClick={() => hide()}>
            Close
          </button>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
plus-grid-item {
  text-align: center;
}

Backdrop

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-backdrop">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-backdrop" backdrop={false}>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Scrollable

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-scrollable">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-scrollable" scrollable>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
          </p>          
          <p>
            Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
          </p>          
          <p>
            Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
          </p>          
          <p>
            Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
          </p>          
          <p>
            Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
          </p>          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
          </p>          
          <p>
            Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
          </p>          
          <p>
            Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
          </p>          
          <p>
            Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
          </p>          
          <p>
            Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
          </p>          
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Specific Scrollable

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-specific-scrollable">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-specific-scrollable" scrollable>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body scrollable>          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
          </p>          
          <p>
            Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
          </p>          
          <p>
            Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
          </p>          
          <p>
            Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
          </p>          
          <p>
            Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
          </p>          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
          </p>          
          <p>
            Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
          </p>          
          <p>
            Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
          </p>          
          <p>
            Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
          </p>          
          <p>
            Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
          </p>          
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Fullscreen

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-fullscreen">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-fullscreen" placement="bottom" fullscreen>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Full Width

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-full-width">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-full-width" fullWidth>      
      <Dialog.Content>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Full Height

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-full-height">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-full-height" placement="center" fullHeight>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Sticky

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-sticky">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-sticky" fullWidth sticky>      
      <Dialog.Content>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Nesting

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Dialog } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="center" gutter="md">      
      <Grid.Item xs="12" sm="auto">        
        <Dialog.Toggler connector="dialog-nesting-1">
          Open Dialog 1
        </Dialog.Toggler>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Dialog.Toggler connector="dialog-nesting-2">
          Open Dialog 2
        </Dialog.Toggler>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Dialog.Toggler connector="dialog-nesting-3">
          Open Dialog 3
        </Dialog.Toggler>        
      </Grid.Item>      
    </Grid>    
    <Dialog animation="fade" connector="dialog-nesting-1" size="xl">      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog 1
        </Dialog.Header>        
        <Dialog.Body>          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend
          ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere
          lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum
          hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum,
          pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo
          fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna
          tempus, fringilla nisl.
          </p>          
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler connector="dialog-nesting-2">
            Open Dialog 2
          </Dialog.Toggler>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
    <Dialog animation="fade" connector="dialog-nesting-2" size="lg">      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog 2
        </Dialog.Header>        
        <Dialog.Body>          
          <p>
            Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae
          venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies
          nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non
          diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida,
          eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat
          urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis
          vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis.
          In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
          </p>          
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler connector="dialog-nesting-3">
            Open Dialog 3
          </Dialog.Toggler>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
    <Dialog animation="fade" connector="dialog-nesting-3" size="sm">      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog 3
        </Dialog.Header>        
        <Dialog.Body>          
          <p>
            Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus
          sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio.
          Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante
          ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum,
          luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis
          maximus.
          </p>          
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
plus-grid-item {
  text-align: center;
}

Prevent

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Dialog } from "@htmlplus/react";

const App = () => {
  const ensure = (type, event) => {
    if (window.confirm(`Are you sure you want to ${type} it?`)) return;
    event.preventDefault();
  };

  return <>    
    <div className="center">      
      <Dialog.Toggler connector="dialog-prevent">
        Open
      </Dialog.Toggler>      
    </div>    
    <Dialog animation="fade" connector="dialog-prevent" onOpen={event => ensure('open', event)} onClose={event => ensure('close', event)}>      
      <Dialog.Content>        
        <Dialog.Header>
          Dialog Title
        </Dialog.Header>        
        <Dialog.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Dialog.Body>        
        <Dialog.Footer>          
          <Dialog.Toggler>
            Close
          </Dialog.Toggler>          
        </Dialog.Footer>        
      </Dialog.Content>      
    </Dialog>    
  </>;
};

export default App;
.center {
  text-align: center;
}
Contributors
Prev
Cropper
Next
Divider
SELECT YOUR FRAMEWORK
React logo
React
© 2020 HTMLPLUS. Released under MIT License.