## Modals

The best way to invoke the modal window is through directive `sd-modal`.

Modal state (open/close) is handled by `data-model=""` attribute.

### Default

By default modal has 480px width and auto height (depends on the amount of content).

Example Markup

### Modal Default

This is sample message inside modal!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

###

                                Modal Default

                                This is sample message inside modal!

#### Modal with min height modifier

Sometimes there is a need to add min height to modal body, and in that case add class `.modal__body--add-min-height` on div block `.modal__body`. This will add min height of 300px to modal body.

Example Markup

### Modal Default with min height modifier

This is sample message inside modal!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

###

                                Modal Default with min height modifier

                                This is sample message inside modal!

### Large

Large modal has 680px width and auto height (depends on the amount of content). Add class `.modal--large` on div `sd-modal`.

Example Markup

### Modal Large

This is sample message inside modal!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

###

                                Modal Large

                                This is sample message inside modal!

### Extra Large

Large modal is 1000px wide and has auto height (it will depend on the amount of content). Add class `.modal--x-large` on div `sd-modal`.

Example Markup

### Modal Extra large

This is sample message inside modal!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

###

                                Modal Large

                                This is sample message inside modal!

### Fill

Fill modal is filling up available browser space, with 40px space around. Add class `.modal--fill` on div `sd-modal`.

Example Markup

### Modal Fill

This is sample message inside the modal!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

###

                                Modal Fill

                                This is sample message inside modal!

### Fullscreen

Fullscreen modal behaves as full page overlay, width and height set to 100%. Add class `.modal--fullscreen` on div `sd-modal`. There is also class `.modal--white` that applies white background to modal body.

Example Markup

### Modal Fullscreen

This is sample message inside modal!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

###

                                Modal Fullscreen

                                This is sample message inside modal!

### Dark modal

The modal can be rendered in dark mode by adding`theme="dark-ui"` on div `sd-modal`. This example shown uses a custom layout inside the modal body.

Example Markup

### Modal dark (fill option)

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet,consectetur adipiscing elit.
Success
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis.
Success
Input label
00/90
Hendrerit in vulputate.
Select label
Maecenas faucibus mollis interdum.

###

                                Modal dark (fill option)

                                                    Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.
                                                    Lorem ipsum dolor sit amet,consectetur adipiscing elit.

                                                        Success

                                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
                                                    Sed posuere consectetur est at lobortis.

                                                        Success

                                                                    Input label

                                                                    00/90

                                                                        Hendrerit in vulputate.

                                                                    Select label

                                                                        Maecenas faucibus mollis interdum.

### Tabs

Special case for modals with tabbed navigation and nested footer inside the body. Add class `.modal--tabs` on div `sd-modal`. This version also works with different modal size, for example just add `.modal--large` to get large modal with tabs.

Example Markup

### Modal with Tabs

This is sample message inside modal!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

###

                                Sample modal

                                    Tabs here

                                    This is sample message inside modal!
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

### Modal with external template

In some cases we will need to trigger modal through angular with defined template in different `.html` file. This can be done with `sdModalService` service.

Example Markup

                        var modal;
                        scope.openModal = function () {
                            modal = sdModalService.open({
                                scope: scope,
                                controller: ctrlModalController,
                                controllerAs: 'ctrl',
                                size: 'fullscreen',
                                classes: 'modal--white',
                                template: 'templates/modal-template.html'
                            });
                        };
                        scope.close = function () {
                            modal.close();
                        };