@jwrunge/modal v1.1.3

Easy Modal

This is an easy modal, written in Svelte and usable either as a Svelte component or in vanilla JavaScript. It is designed to be:

• Quick to implement
• Highly customizable
• Easily stylable with a minimum of CSS
• Fun to play with

Check out the CodePen example for non-Svelte implementations and the Svelte REPL for Svelte implementations for examples of how to implement Easy Modal!

Contents

1. Development
2. Installation
3. Implementation
4. Customization
5. Styling

Development

Author: Jacob Runge

• Check out my website, JacobRunge.com
• See the code on GitHub
• Get the Node package via NPM

Support the developer

This code is provided under the MIT license, and is completely free to use and modify in any personal or commercial projects--just because I like you! If you are using this code in an application that is making you money, or even if you just think it's super neat and want to support me as a developer, consider a small tip at the "Buy me a coffee!" link below. It's much appreciated! :-)

Installation

The JavaScript

Install via NPM: npm install @jwrunge/svelte-modal (if using as a module) or include via transpiled script: modal.js

<script src="path/to/modal.js">

The CSS

I recommend including the foundation stylesheet as well, unless it significantly breaks your design. The foundation stylesheet is meant to be very minimal, allowing you quite a bit of control over the look and feel of your modals. See "Styling" below for more information.

With an NPM installation, the stylesheet can be found in the node_modules directory: <link rel='stylesheet' href='node_modules/@jwrunge/modal/dist/modalstyle.css'>

Direct links

Download local copies of the code here:

• GitHub JavaScript file: modal.js
• GitHub CSS file: modalstyle.css
• GitHub Svelte file: Modal.svelte

Implementation

There are two ways to implement the modal:

• Including in non-Svelte applications
• Including in your Svelte application

Non-Svelte implementation

Implementation using Node.js

Import the script. The modal assumes it will be compiled by a build system such as webpack or rollup.

import modal from '@jwrunge/modal'

You can now create a modal instance using new modal() -- see "Instantiating" below).

Implementation using <script>

Include the modal via <script> tag:

<script src="node_modules/@jwrunge/modal/dist/modal.js">

You can use the path to modal.js in your node_modules folder or a local downloaded copy.

You can now create a modal instance using new modal() -- see "Instantiating" below).

Instantiating

However you include the modal script, the following details basic usage:

const myModal = new modal({
    target: document.getElementById('myElement'),
    props: {
        closable: true,
        closepos: "modal-closer-right",
        content: "<p>This is my modal!</p>"
    }
})

This method uses Svelte's client-side component API, and you can refer to the API documentation for advanced use. In a nutshell, the new modal() method can take the following options:

Customization properties can be set dynamically using myModal.$set():

myModal.$set({
    closable: false,
    loading: true
})

Opening and closing the modal

To make the modal visible (open), set the customization property visible equal to true: myModal.$set({ visible: true }). Of course, the modal can be made invisible (closed) by setting the visible property to false. Changing this property isn't necessary when implementing the modal as a Svelte component.

The modal emits a single event, close, called when the user clicks the x close button or, if enabled, the background. To bind to this event, call the myModal.$on() function and pass "close" as the first argument:

myModal.$on("close", function(){
    myModal.$set({ visible: false })
})

Setting modal content

Setting the modal's content is as easy as passing in a customization property to the props option, either during initialization or by using myModal.$set({ content: "My content" }).

Destroying the modal

You can destroy the modal instance, too, if you want... myModal.$destroy()

Svelte implementation

Start by including the Svelte source file in your Svelte application: import Modal from '@jwrunge/dist/Modal.svelte'

If you are a Svelte developer, you probably already know how Svelte components work. Once imported, you can pass or bind any props (listed in Customization) and connect functions to the close event using on:close={yourFunction}. See the example below.

Note that the visible prop was meant for non-Svelte developers as an easy way to open and close the modal, and the content and heading props circumvent non-Svelte developers' inablity to use component slots. You can use them, but it may be easier to open and close the modal using reactive variables and to pass content to the modal via the slot, like so:

let openModal = ""

{#if openModal == "cool modal"}
    <Modal closable={true}>
        <h2>Cool modal, bruh!</h2>
        <p>It's really the coolest modal ever.</p>
        <button on:click={()=> { openModal = "" }}>Close it!</button>
    </Modal>
{/if}

Customization

The following customization properties can be passed as props to the modal. Some of these allow for quick styling of the modal without the need to use CSS, and I have seperated transition- and style-related props into seperate tables. Modal style can be easily modified using CSS--see "Styling" below.

Loading and closing customization

Transition customization

Note: transitions refer to Svelte's built-in transitions, listed here. No additional script imports are required to use these transitions in the modal.

Appearance customization

All of these style properties can be set through CSS, too--see "Styling" below.

Styling

Additional custom styling is super easy, and can be done in standard CSS in your page. Here are the relevant classes:

This is not an exaustive list of all modal classes; those can be discovered and manipulated via the developer inspector in your browser if you need deeper customizations for your particular use case.