sunweb

Modal

component js

Definition


Modals are flexible dialog prompts. They support completely custom content.

c-modal Static content

React

React Modal Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.

Loading...

Javascript

Loading...

c-modal Asynchronous content

React

React Loading content ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.

Loading...

Javascript

Loading...
c-modal Neutral style

React

React Modal Neutral Style Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.

Loading...

Javascript

Loading...
c-modal Without header

React

Modal without header and cross button.

Loading...

Javascript

Loading...


Modifiers


Modifiers change the size of the modals:

c-modal c-modal--small

React

React small Modal Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.

Loading...

Javascript

Loading...

c-modal c-modal--large

React

React Large Modal Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.

Loading...

Javascript

Loading...

c-modal c-modal--open-on-load

React

Modal openOnLoad title (React)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.

Loading...

Javascript

Loading...