modal-popups-js v0.10.1

Modal-Popups-js

Plugin for creating modals and popups.

Table of contents

• Installation
• Examples
  • Basic Usage
  • Multiple Triggers for One Popup
  • Custom Trigger Events
  • Custom Callbacks
• Public Methods
  • Modals - Class
    • .getModal()
    • .getModals()
    • .registerModal()
    • .addCloseModalEvents()
  • Modal - Instance
    • .toggle()
    • .isVisible()
  • InitModals()
• HTML Attributes
  • Body Tag & Overlay
  • Containers
  • Triggers
  • Target

Installation

You can use NPM to download package into your project

npm install modal-popups-js

OR you can import the module directly in your project with ES6 Modules

<script type="module">
    import { Modals, initModals } from './modals-js/modals.js'; 
</script>

Basic Usage

See '/demo/basic-usage.html' in repo for complete example

CSS

<link rel="stylesheet" href="./modals-js/modals.css">

HTML

<button data-modal-trigger data-modal-target="example-modal">
    Trigger 1
</button> 

<div class="modal-containers">
    <div class="modal-container" data-modal-container="hidden" data-modal-target="example-modal">
        <p>Content goes here</p>
        <button data-close-modal="example-modal">Okay</button>
    </div>
</div>

JavaScript

<script type="module">
    // ES6 Module Import
    import { Modals, initModals } from './modals-js/modals.js'; 

    // Initialize Plugin
    initModals();
</script>

Multiple Triggers for One Popup

See '/demo/basic-usage.html' in repo for complete example

HTML

<button data-modal-trigger data-modal-target="example-modal">
    Trigger 1
</button> 

<button data-modal-trigger data-modal-target="example-modal">
    Trigger 2
</button> 

<div class="modal-containers">
    <div class="modal-container" data-modal-container="hidden" data-modal-target="example-modal">
        <p>Content goes here</p>
        <button data-close-modal="example-modal">Okay</button>
    </div>
</div>

Trigger Events

See '/demo/basic-usage.html' in repo for complete example

By default the trigger event for modals is a click event. However, you can use other events by updating the data-modal-trigger attribute.

HTML

<button data-modal-trigger="mouseover" data-modal-target="example-modal">
    Trigger 1
</button> 

<div class="modal-containers">
    <div class="modal-container" data-modal-container="hidden" data-modal-target="example-modal">
        <p>Content goes here</p>
        <button data-close-modal="example-modal">Okay</button>
    </div>
</div>

JavaScript

<script type="module">
    // ES6 Module Import
    import { Modals, initModals } from './modals-js/modals.js'; 

    // Initialize Plugin
    initModals();
</script>

Custom Callback

The default event for triggering modal visibility can be overwritten by adding data-modal-override and data-modal-callback attributes to the modal trigger. If you a developer does this, they become responsible for toggling the modal visibility exchange for being able to add custom behavior around the interaction.

HTML

<button data-modal-trigger data-modal-target="example-modal">
    Trigger 1
</button> 

<div class="modal-containers">
    <div class="modal-container" data-modal-container="hidden" data-modal-target="example-modal" data-modal-override="true" data-modal-callback="exampleCallback">
        <p>Content goes here</p>
        <button data-close-modal="example-modal">Okay</button>
    </div>
</div>

JavaScript

<script type="module">
    // ES6 Module Import
    import { Modals, initModals } from './modals-js/modals.js'; 

    // Initialize Plugin
    initModals();

    // Custom callback where the developer has to trigger the modal's visibility 
    window.exampleCallback = ( event ) => {
        let targetName = event.target.getAttribute( 'data-modal-target' ); 
        Modals.getModal( targetName ).toggle(); 
        alert( 'Custom callback triggered on ' + targetName + '; visible = ' + Modals.getModal( targetName).getSettings().visible );
    } 
</script>

Public Methods

HTML Attributes