pure_js_modal
v1.0.0
Published
Pure javascript modal librairy
Downloads
4
Maintainers
Readme
pure_js_modal v.1.0.0
Modal library in pure Javascript.
Summary
2.1. Options
2.2. Functions
3.1. HTML structure
3.2. Style
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