Light Mode

Modal

The <salla-modal> web component displays a dialog box or pop-up window on top of the current page. It is positioned above all other components in the application, restricting scrolling of the main page and only allowing scrolling of the modal's content. It consists of a Button component to activate the modal, and that can be customized using the properties, events, methods and slots' parameters available.

Example

Modal Example

Usage

<!-- Button to Activate the Modal-->
<button onclick="(function(){event.preventDefault();
    document.querySelector('#subscribe-modal').open();
    return false;})();
    "data-modal-id="subscribe-modal">
        Open Modal
</button>
      
<!-- Modal Settings -->
<salla-modal id="subscribe-modal"></salla-modal>

Click Me!

<!-- Some awesome content within the modal. Custom Slot for the Modal-->
<div slot="footer">
    <salla-button width="wide" onclick="modal.close()">Close</salla-button>
</div>

  <Tab title="SASS">

This JS web component can be targeted for styling by its .s-modal class. Following is a complete source code for customizing this component:

.s-modal {
  &-container{

  }
  &-wrapper {

  }
  &-close {

  }
  &-header {

  }
  &-header-inner {

  }
  &-header-content {

  }
  &-header-img {

  }
  &-icon {

  }
  &-bg-normal {

  }
  &-bg-success {

  }
  &-bg-error {

  }
  &-bg-primary {

  }
  &-text-success {

  }
  &-text-error {

  }
  &-title {

  }
  &-sub-title {

  }
  &-title-below {

  }
  &-body-slot {

  }
  &-body {

  }
  &-padding {

  }
  &-spacer {

  }
  &-align-middle {

  }
  &-align-top {

  }
  &-align-bottom {

  }
  &-overlay {

  }
  &-overlay-leaving {

  }
  &-entering {

  }
  &-leaving {

  }
  &-is-center {

  }
  // modal sizes
  &-xs {

  }
  &-sm {

  }
  &-md {

  }
  &-lg {

  }
  &-xl {

  }
  &-full {

  }
}

Properties

Property	Attribute	Description	Type	Default
Cenetered	`cenetered`	Aligns the modal's content to be in center view	`boolean`	`'false'`
Has Skeleton	`has-skeleton`	Opens the modal on rendering the component	`boolean`	`'false'`
Icon Style	`icon-style`	Sets the modal's header icon style.	`"error" \| "success" \|"normal" \| "primary"`	`'undefined'`
Is Closable	`is-closable`	Sets the modal to be at the closing state	`boolean`	`'true'`
Is Loading	`is-loading`	Shows the loading state in the modal	`boolean`	`'false'`
No Padding	`no-padding`	Adds no Padding to the modal	`boolean`	`'false'`
Position	`position`	Positions the modal in a fixed part of the screen	`"bottom" \| "middle" \| "top"`	`'middle'`
Sub Title	`sub-title`	Sets the modal subheader context	`string`	`''`
Sub Title First	`sub-title-first`	Whether or not to show the subtitle before the title	`boolean`	`'false'`
Visible	`visible`	Shows the modal on rendering the component	`boolean`	`'false'`
Width	`width`	Adjusts the size of the modal	`"full" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`

Methods

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as close which closes the modal dialog.

Method	Description	Return Type
`close()`	Closes the modal dialog	`Promise<HTMLElement>`
`loading()`	Loads the modal dialog	`Promise<HTMLElement>`
`setTitle(modalTitle: any)`	Sets the title of the modal dialog	`Promise<HTMLElement>`
`open()`	Opens the modal dialog	`Promise<HTMLElement>`
`stopLoading()`	Stops loading the modal dialog	`Promise<HTMLElement>`

:::tip[Note]
To use a method, you can for instance use open the component via the method:

onclick="salla.event.dispatch('modal::open','modal_id')"

and close the component via the method:

onclick="salla.event.dispatch('modal::close','modal_id')"

:::

Slots

Theslots makes it customizable to modify certain labels, such as footer

Slot	Description
`footer`	Footer of the modal

Events

Event	Description	Type
`modalVisibilityChanged`	This event will be fired when the modal visibilty is changed	`CustomEvent<Boolean>`

Last modified: 2 months ago