SUSModal

Library for displaying modals (No dependencies)

(SUS) Simplicity is the ultimate sophistication - Leonardo da Vinci

Keyboard navigation: Tab for changing the focus on the elements and Escape for hiding the modal

Getting started

Install as a package

npm i susmodal

or use a CDN

Javascript
<script src="https://unpkg.com/susmodal/src/susmodal.js"></script>
<script src="https://unpkg.com/susmodal/src/susmodal.min.js"></script>

CSS
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.css"></link>
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.min.css"></link>

... here is an example of modal without css decoration

<!-- Choose an id, for example my-modal -->
<div id="my-modal" class="susmodal" tabindex="-1" role="dialog">   
    <div class="modal-dialog" role="document">

        <!-- Don't change this id: susmodal-content -->
        <div id="susmodal-content" class="susmodal-content">
            <div class="susmodal-body">
                <p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modals </p>         
            </div>
            <hr>
            <div class="susmodal-footer">

                <!-- Facultative but you can use the class "susmodal-close-btn" among the elements you want for closing the modal -->
                <button type="button" class="susmodal-close-btn">Cancel</button>

                <button type="button" class="susmodal-confirm-btn">Confirm</button>
            </div>
        </div>
    </div>
</div>

... import in js file or use script:src

// with webpack 
import SUSModal from "susmodal";

// if you don't import (not the same path)
<script src="node_modules/susmodal/src/susmodal.js"></script>
<script src="node_modules/susmodal/src/susmodal.min.js"></script>

... script with basic configuration

const MySUSModal = new SUSModal( {
        id: 'my-modal',
    }
);

// for example, display the modal when you click on a button
let btnDisplayModal = document.getElementById("display-modal")
btnDisplayModal.addEventListener('click', () => {
    MySUSModal.show();
});

... configuration options

// default values in class constructor:

id: null, 
animation: "fade", //fade animation or movement : "left", "top", "right", "bottom"
animationDuration: 400, // milliseconds
width: "400px", // apply your own CSS Units
height: "auto", // idem

backgroundDark: false, // background of the page (try and you will see :) ) 
// pay attention to your CSS framework

finalPosition: "auto", // Use the margin CSS property, for example "10% 35%"

... methods for displaying and hiding the modal

// display
MySUSModal.show()

// hide
MySUSModal.hide()

... add the core CSS

// import or require with webpack

// or add local link
<link rel="stylesheet" href="node_modules/susmodal/src/modal.css">
<link rel="stylesheet" href="node_modules/susmodal/src/modal.min.css">

// or use a CDN
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.css"></link>
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.min.css"></link>

... and that's it for the functionnal aspect.

CSS

Please send me html components for others CSS frameworks (tested and adapted to the library) and i will add them to the documentation

Also tell me about your integration experiences and i will add recommandations in future releases

Bootstrap 4

<!-- Choose an id, for example my-modal -->
    <div id="my-modal" class="modal" tabindex="-1" role="dialog">   
        <div class="modal-dialog" role="document">

            <!-- Don't change this id: susmodal-content -->
            <div id="susmodal-content" class="modal-content">
                <div class="modal-body">
                    <p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modal </p>         
                </div>
                <hr>
                <div class="modal-footer">
                    <!-- Facultative but you can use the class "susmodal-close-btn" among the elements you want for closing the modal -->
                    <button type="button" class="btn btn-secondary susmodal-close-btn">Cancel</button>
                    <button type="button" class="btn btn-primary">Confirm</button>
                </div>
            </div>
        </div>
    </div>

Bulma

    <!-- Choose an id, for example my-bulma-modal -->
    <div  id="my-bulma-modal" class="modal">

        <!-- If you want to use backgroundDark property, you should add this tag instead of -->
        <div class="modal-background"></div>

        <!-- Don't change this id: susmodal-content -->
        <div id="susmodal-content" class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Modal title</p>

                <!-- Facultative but you can use the class "susmodal-close-btn" on elements for close the modal -->
                <button class="delete susmodal-close-btn" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
                <!-- Content ... -->
                <p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modals (Bulma CSS) </p>         
            </section>
            <footer class="modal-card-foot">
                <button class="button is-success">Save changes</button>

                <!-- Facultative but you can use the class "susmodal-close-btn" on elements for close the modal -->
                <button class="button susmodal-close-btn">Cancel</button>
            </footer>
        </div>
    </div>