pure_js_modal

pure_js_modal v.1.0.0

Modal library in pure Javascript.

Summary

1. Install

2. How to use

   2.1. Options

   2.2. Functions

3. Customize

   3.1. HTML structure

   3.2. Style

4. Build

5. Future versions

6. Author

7. License

Install

You can install pure_js_modal by clone this repo or you can use npm.

npm install pure_js_modal --save

Import pure_js_modal.min.js and pure_js_modal.min.css in your project.

<link rel="stylesheet" href="path/to/style/pure_js_modal.min.css">
<script src="path/to/script/pure_js_modal.min.js"></script>

How to use

To use pure_js_modal you can simply bind open function to a button (see example below):

<button onclick="clickEvent()">Open modal</button>

<script type="text/javascript">
    function clickEvent() { // Your open modal function
        var options = { // See avaible options below
            width: "50%",
            content: "<p>Hello world</p>"
        };
    
        ft_openModal(options); // Generate modal by passed options
    }
</script>

Options

• width (Number): Modal width, can be all valid css unit (px, %, em) (default: "60%"")
• z-index (Number): Modal z-index (out-zone z-index = z-index -1) (default: 999)
• header (Boolean): Generate header or not (default: true)
• title (String): Modal title, display in header (default: "New modal")
• animation (Boolean): Enable or not fade-in / fade-out animations (default: false)
• animation-time (String): Animation duration in seconds (default: 1)
• custom-class (String): Modal custom class
• responsive (Number): Activation size for responsive mode (defaul: 375)
• content (String): Modal body content (default: <p>Hello <strong>world</strong></p>)

/*
* Any valid html can be used
*/

// Example:
content: "<p>Hello <strong style='red'>world</strong></p>"

• footer (Boolean): Generate footer or not (default: true)
• footer-content (Object Array): Footer content, generate button for footer

"footer-content": [{
    label: String, // Button name, required
    callback: Function // Callback function's name (without parenthesis), required
}, {...}]

• out-zone (Boolean): Generate out zone or not (default: true)
• open (Function): Triggered on modal open
• close (Function): Triggered on modal close

Options example:

var options = {
    width: "60%",
    "z-index": 10,
    header: true,
    title: "Hello world",
    animation: true,
    "animation-time": "0.5",
    "custom-class": "custom",
    content:    "<p>Lorem Ipsum...</p>"+
                "<button>Hello</button>"+
                "<a href='#>World</a>"
    }],
    footer: true,
    "footer-content": [{
        label: "Save",
        callback: ft_closeModal
    }],
    "out-zone": true,
    open: function() {
        console.log("Open modal");
    },
    close: function() {
        console.log("Close modal");
    }
}

Functions

• ft_openModal(options): Generate modal with provided options
• ft_closeModal(): Close open modal

Customize

HTML structure

Modal html is define as following:

<!-- Modal -->
<div class="pure-modal">
    <!-- Modal header -->
    <div class="pure-modal-header">
        <h2 class="pure-modal-title">Title</h2>
    </div>
    <!---->
    
    <!-- Modal body -->
    <div class="pure-modal-body">
        <!-- Injected content -->
    </div>
    <!---->
    
    <!-- Modal footer -->
    <div class="pure-modal-footer">
        <button class="pure-modal-button">Button</button>
    </div>
    <!---->
</div>
<!---->

 <!-- Background zone, quit on click -->
<div class="pure-modal-out"></div>
<!---->

Style

You can overwrite style with these following class:

• pure-modal: Main modal div, contain all modal sub-div.

.pure-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #fff;
	border: solid 1px rgb(25, 25, 25);
}

• pure-modal-header: Modal header

.pure-modal-header {
	padding: 10px;
	border-bottom: solid 1px rgb(25, 25, 25);
}

• pure-modal-title: Title in header (no style by default)
• pure-modal-body: Modal body

.pure-modal-body {
	padding: 10px;
}

• pure-modal-footer: Modal footer

.pure-modal-footer {
	padding: 10px;
	border-top: solid 1px rgb(39, 39, 39);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

• pure-modal-button: Modal footer buttons (no style by default)
• pure-modal-out: Modal background, close modal on click

.pure-modal-out {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
}

Build

If you want modify pure_js_modal, you can update sources files and build dist files with the following command.

npm run build

Changelog

1.0.0 - (07/06/2020)

Changed

• #3 - Adding custom class to options
• #4 - Adding fade-if / fade-out animation
• #5 - Form generation removed
• #6 - Adding open/close events

v0.1.0 - (14/04/2020)

• First version

Authors

Jbristhuille - https://github.com/Jbristhuille

License

This project is licensed under the MIT License - see the LICENSE.md file for details