sunweb

Modal

component js

Definition


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

c-modal Static content

Handlebars

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

Handlebars

Loading content ...

Please, wait until we retrieve the content

Loading...

Javascript

Loading...
c-modal Neutral style

Handlebars

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 Without header

Handlebars

Modal without header and cross button.

Loading...

Javascript

Loading...


Modifiers


Modifiers change the size of the modals:

c-modal c-modal--small

Handlebars

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

Handlebars

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

Handlebars

Open on load modal title (HBS)

If you want to open the modal when the page is loaded, you can add the openOnLoad property when you render the component and it will be shown without any click

Loading...

Javascript

Loading...