ez-modal

This is a native web component that builds a simple modal for use in a project.

This modal aims to be responsive and simple to use. It has a light transition in and out to create a nice user experience.

This element does not use Shadow-Dom which should allow a user to customize the styles of the component by using custom stylesheets, however this component is not intended to be modified. If you do seriously want to change it, I recomend forking the project and altering the component to fit your needs.

Installing

Installing this app can be done a few ways.

Quickstart

Add this script to your head tag.

<script src="https://unpkg.com/[email protected]/dist/ez-modal.js"></script>

NPM

Install the package using npm or yarn.

npm:

npm i --save ez-modal

yarn:

yarn add ez-modal

Including these tags in your project.

import my-component;

If you need to integrate this into another framework like React or angular be sure to check out the Stencil page for integration.

Getting started

The basic usage of this modal is below.

<ez-modal is-open>
  <h1 slot="title"><!--Optional-->
    Alert
  </h1>
  Hello World!
</ez-modal>

Using JavaScript with our modal

This modal is a real HTML element so you can do select it like a real element.

<ez-modal>
  <h1 slot="title"><!--Optional-->
    Alert
  </h1>
  Hello World!
</ez-modal>
<script>
  var modal = document.querySelector('ez-modal');
  modal.isOpen = true; // Will set is-open and open the modal.
  setTimeout(function() {
    modal.isOpen = false;
  }, 3000); // Will close the modal after a few seconds.
</script>

Slots

Ez-modal has 2 slots for the component, title and content.

Title

In the previous examples you will see the h1 tag with title passed in as slot.

<h1 slot="title">...</h1>

This will put content on the top of the modal. By default this value is Alert and can be changed by passing a valid value.

Content

Any other content that is not inside of the slot title element will be appended into the normal slot. This content will appear as the body of the modal. In our example above this is Hello World!.

Detailed Generated Modal Docs

Advanced modal documentation can be found on the Modal information page

Where does it work?

Right now it works everywhere. Chrome, Firefox, Edge, Safari, and IE. We do not indend to support IE long term because we don't believe IE should still be in use. The fact that it works in IE is nice, but not something we aimed to do on purpose.

Working on this project

This repository comes with a working demo version of this component. In order to run this demo run the following commands.

npm install
npm start