Modal

A flexible modern modal js plugin.

Samples

Introduction

Installation

Yarn

yarn add @pluginjs/modal

NPM

npm i @pluginjs/modal

Getting Started

CDN:

Development:

<script src="https://unpkg.com/@pluginjs/modal/dist/modal.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@pluginjs/modal/dist/modal.css">

Production:

<script src="https://unpkg.com/@pluginjs/modal/dist/modal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@pluginjs/modal/dist/modal.min.css">

Initialize

HTML:

<div class="element"></div>

ECMAScript Module:

import Modal from "@pluginjs/modal"
import "@pluginjs/modal/dist/modal.css"

Modal.of(document.querySelector('.element'), options)

CommonJS:

require("@pluginjs/modal/dist/modal.css")
const Modal = require("@pluginjs/modal")

Modal.of(document.querySelector('.element'), options)

Browser:

<link rel="stylesheet" href="https://unpkg.com/@pluginjs/modal/dist/modal.css">
<script src="https://unpkg.com/@pluginjs/modal/dist/modal.js"></script>
<script>
  Pj.modal('.element', options)
</script>

API

Options

Options are called on modal instances through the modal options itself. You can also save the instances to variable for further use.

Name | Description | Default --|--|-- "theme" | Add plugin theme option | null "template" | The main element templates | function() {...} "templates" | Element templates | {} "autoDestroy" | Remove the element when closed, true or false | true "title" | Whether to display title, true or false | `"content"` | Whether to display content, true or false | "html" | Whether the content is html, true or false | true "close" | Whether to display close button, true or false | true "locale" | Multilingual settings | en "localeFallbacks" | Multilingual settings | true "buttons" | Whether to display button | null "overlay" | Whether to display overlay, true or false | true "overlayCloseOnClick" | Click the background to turn off the modal, true or false | true "appendTo" | where modal will be inserted | body "effect" | Open and close the animation | fadeScale "contentAlignment" | content alignment, left, center or right | left "buttonAlignment" | button alignment, left, center or right | right "titleAlignment" | title alignment, left or center | left "defaultButtonClass" | Default button style | pj-btn pj-btn-primary "icon" | Whether to display icon, If you need to fill in success, info or error | `"icons"` | Default button style description | `{"success":["icon-check-circle","#4be1ab"],"info":["icon-exclamation-circle","#4c93d9"],"error":["icon-times-circle","#f86b67"]}` `"iconColor"` | Modify the icon color | "iconClass" | Add your icon | ``

Events

Events are called on modal instances through the modal events itself. You can also save the instances to variable for further use.

Name | Description --|-- "open" | Gets fired when plugin is destroy "close" | Gets fired when plugin is close "destroy" | Gets fired when plugin is destroy "show" | Gets fired when plugin is show "hide" | Gets fired when plugin is hide

Methods

Methods are called on modal instances through the modal method itself. You can also save the instances to variable for further use.

Name | Description --|-- "destroy" | Destroy plugin

Classes

Name | Description | Default --|| "NAMESPACE" | Declare plugin namespace | pj-modal "ELEMENT" | Declare plugin | {namespace} "THEME" | Declare plugin theme | {namespace}-{theme} "CLOSE" | Declare element is close | {namespace}-close "CONTENT" | Declare element is body | {namespace}-body "TITLE" | Declare element is title | {namespace}-title "ACTIVE" | Declare plugin is actived | {namespace}-active "DISABLED" | Declare plugin is disabled | {namespace}-disabled "CONTAINER" | Declare plugin range | {namespace}-container "HEADER" | Declare element is header | {namespace}-header "BUTTONS" | Declare element is buttons | {namespace}-buttons "OVERLAY" | Declare element is overlay | {namespace}-overlay "FADEIN" | Declare the style of the element fadeIn | {namespace}--fadeIn "OPEN" | Declare element is open | {namespace}-open "IN" | Declare element is in | {namespace}-in "BUTTON" | Declare element is button | {namespace}-btn "ICON" | Declare element is icon | {namespace}-icon

Translations

Name | EN | ZH --||- "Cancel" | Cancel | 取消 "Yes" | Yes | 确定

Browser support

Tested on all major browsers.

| IE / Edge | Firefox | Chrome | Safari | Opera | | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions|

License

@pluginjs/modal is Licensed under the GPL-v3 license.

If you want to use @pluginjs/modal project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.

For purchase an Commercial License, contact us [email protected].

Copyright

Copyright (C) 2022 Creation Studio Limited.