logo polydile dile-components

dile-modal

This is a Web Component to implement a dialog box or modal box.

Install

npm install @dile/dile-modal

Usage

Import the component

import '@dile/dile-modal/dile-modal';

Use the component

Whatever you place inside the <dile-modal> tag will be the content displayed when the modal box opens.

<dile-modal id="myModal">
  <p>
    Lorem, ipsum dolor sit...
  </p>
</dile-modal> 

When needed, you may use the open() method to open the modal box interface, and close() to close it.

document.getElementById("myModal").open();

Other posibility in order to open or close the modal box is to set the boolean opened attribute.

Properties

Methods

Events

Style customization

You can customize the modal box interface by using the CSS custom properties bellow.

Custom propertyDescriptionDefault
--dile-modal-widthContent layer width280px
--dile-modal-min-widthContent layer min width250px
--dile-modal-max-widthContent layer max width100vw
--dile-modal-heightConten layer heightauto
--dile-modal-min-heightContent layer max heightauto
--dile-modal-max-heightContent layer max height100vh
--dile-modal-content-background-colorContent layer background color#fff
--dile-modal-content-paddingContent layer padding1em
--dile-modal-border-radiusContent layer border radius15px
--dile-modal-content-shadow-displacementcontent layer shadow offset6px
--dile-modal-content-shadow-blurContent layer shadow blur16px
--dile-modal-content-shadow-colorContent layer shadow color#000
--dile-modal-background-colorModal layer background colorrgba(30,30,30, 0.8)
--dile-modal-z-indexModal layer z-index100
--dile-modal-content-z-indexContent layer z-index101
--dile-modal-close-icon-colorClose icon color#888
--dile-modal-close-icon-sizeClose icon size24px
--dile-modal-animation-durationDuration of the opacity modal animation0.3s
--dile-modal-close-icon-topTop position applied to the close icon5px
--dile-modal-close-icon-rightRight position applied to the close icon18px
--dile-modal-close-icon-cursorCursor style for the close iconpointer
--dile-modal-extra-top-separation-when-iconExtra separation for the content layer on the top, when the close icon is visible10px

dile-modal demos

Default modal box

class MyComponent extends LitElement {
  
  render() {
    return html`
      <dile-modal class="modalbox" id="elmodal1">
        <h2>I am dile-modal</h2>
        <p><b>Click outside to close the modal box</b></p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima aut ipsa laborum deserunt, fuga culpa hic quod, dolor nostrum consectetur laudantium dignissimos accusantium et repellendus illum quis aliquam earum ab!</p>
        <p>Pariatur vero impedit repudiandae labore mod!</p>
      </dile-modal>
      <button id="open">Show default modal box</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('open').addEventListener('click', () => {
      this.shadowRoot.getElementById('elmodal1').open();
    });
  }
}
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;

Styled modal with close icon

class SecondComponent extends LitElement {
  static get styles() {
    return css`
      .myModalCustomized {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        --dile-modal-border-radius: 0;
        --dile-modal-content-background-color: #303030;
        --dile-modal-width: 200px;
        --dile-modal-min-width: 100px;
        --dile-modal-content-shadow-color: #ddd;
        --dile-modal-background-color: #fff;
        --dile-modal-animation-duration: 1s;
        --dile-modal-close-icon-right: 5px;
        --dile-modal-close-icon-color: yellow;
        color: #fff;
      }
      .myModalCustomized p {
        color: #f66;
        font-size: 0.9em;
        margin: 10px 0;
        text-transform: uppercase;
      }
    `
  }
  render() {
    return html`
      <dile-modal id="elmodal2" class="myModalCustomized" showCloseIcon>
        <p>Hi dile-modal!</p>
        <div>It is posible to close the modal box with the close icon</div>
      </dile-modal>
      <button id="open">Open styled modal</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('open').addEventListener('click', () => {
      this.shadowRoot.getElementById('elmodal2').open();
    });
  }
}
customElements.define('second-component', SecondComponent);
export const JsStory2 = () => html`<second-component></second-component>`;

Blocking modal box

class ThirdComponent extends LitElement {
  static get styles() {
    return css`
      dile-modal {
        --dile-modal-border-radius: 3px;
        --dile-modal-close-icon-right: 10px;
        --dile-modal-close-icon-top: 10px;
        --dile-modal-close-icon-color: red;
        --dile-modal-background-color: rgba(230,230,230, 0.6);
        --dile-modal-content-shadow-displacement: 0;
        --dile-modal-content-shadow-blur: 24px;
        --dile-modal-content-shadow-color: rgba(130,130,130, 0.6);
      }
      h2 {
        margin-top: 0;
      }
    `
  }
  render() {
    return html`
      <dile-modal class="modalbox" id="elmodal4" showCloseIcon blocking>
        <h2>Blocking</h2>
        <p>Event you click outside, the modal do not closes</p>
        <p>Pariatur vero impedit repudiandae labore mod!</p>
      </dile-modal>
      <button id="open">Open blocking modal</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('open').addEventListener('click', () => {
      this.shadowRoot.getElementById('elmodal4').open();
    });
  }
}
customElements.define('third-component', ThirdComponent);
export const JsStory3 = () => html`<third-component></third-component>`;