CodeSolutionsProject/Modalizer.js
2
0
Fork 0
mirror of https://github.com/jlgarridol/Modalizer.js.git synced 2026-02-14 09:01:35 +01:00
Code Issues Releases Wiki Activity

Complete Readme.md

Browse Source
This commit is contained in:
José Luis Garrido Labrador
2020-08-30 01:00:38 +02:00
parent b18ce78ee2
commit 7debfeb875
2 changed files with 117 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
README.md
View File

@@ -1,2 +1,115 @@
Modalizer.js
==
Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows.
![GitHub](https://img.shields.io/github/license/jlgarridol/modalizerjs?style=flat)
![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/jlgarridol/modalizerjs?style=flat)
![GitHub file size in bytes](https://img.shields.io/github/size/jlgarridol/modalizerjs/dist/js/modalizer.min.js?color=f7df1e&label=size&logo=javascript&style=flat)
![GitHub file size in bytes](https://img.shields.io/github/size/jlgarridol/modalizerjs/dist/css/modalizer.min.css?color=036fb8&label=size&logo=css3&logoColor=036fb8&style=flat)
---
Getting starting
--
### Installation
Via npm
```bash
$ npm install modalizer.js
```
or add it directly using a CDN:
```html
<link rel="stylesheet" href="https://future/modalizer.min.css"/>
<script src="https://future/modalizer.min.js"></script>
```
### Basic usage
#### Launch modal
Add class modalinit and modal's identifier in ```data-modal``` attribute to a ```<a>```, ```<buttom>``` or any else HTML element.
Add class ```modalizer``` to the modal div.
**Example:**
```html
<a class="modalinit" data-modal="standart" href="#"> Click to open</a>
<div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog">
...
</div>
```
#### Close a modal
Add class ```closemodal``` to a ```<a>```, ```<buttom>``` or any else HTML element inside a modal ```div```.
**Example:**
```html
<div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog">
...
<button class="closemodal">Close</button>
...
</div>
```
### Animate a modal
Use a Animate.css animation for open and close animation.
Add ```data-animate-in``` and ```data-animate-out``` with Animate.css animation (without ```animate__```), remove class ```fade``` and add class ```animate__animated``` in modal.
**Example:**
```html
<div class="modal modalizer animate__animated" id="standart" tabindex= "-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
...
</div>
```
### Optionable modals
A optionable modal is which have multiple submodals inside and the user can navigate it between their.
To transform a modal into an optionable you need to add the ```modal-optionable``` class and assign a ```data-stack``` to it.
It is necessary create a instance of ```MOD_Stack``` with the same name in the *javascript*.
**Example:**
```html
<div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standart" tabindex= "-1" role="dialog">
...
</div>
<script>
const defaultStack = new MOD_Stack();
</script>
```
#### Create submodals
The submodals are the ```modal-dialog``` with ```role="document"``` and have full compatibility with classes for ```modal-dialog``` in *Bootstrap* like ```centered``` or ```scrollable```.
Any submodal, except the first, must have the style attribute ```display: none```.
To navigate between submodals exists two classes: ```nextaction``` and ```beforeaction``` to apply to a ```<a>```, ```<button>``` or any alse HTML element.
Also, it is necessary to add the attribute ```data-next``` with the identifier of the next submodal. If this attribute is not there then the modal will end.
In the case of going backwards, the highest submodal in the stack will go. If the stack is empty then the modal will be closed.
In addition, to enable the animation between submodals it is necessary add class ```animate__animated``` in the submodal.
**Example:**
```html
<div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standart" tabindex= "-1" role="dialog">
<div class="modal-dialog animate__animated" id="first_submodal" role="document">
...
<button class="beforeaction">Before</button>
<button class="nextaction" data-next="last_submodal">Next</button>
...
</div>
<div class="modal-dialog animate__animated" id="last_submodal" role="document" style="display: none">
...
<button class="beforeaction">Before</button>
<button class="nextaction">Next</button>
...
</div>
</div>
```
### Fullscreen modal
For a fullscreen modal it is necessary add the class ```fullscreen``` to the ```div```s with classes ```modal-dialog```, ```modal-content```, ```modal-header``` and ```modal-footer```. To make it only for mobile screens you have to add ```-sm``` to ```fullscreen```.
### Blur background
For blur background on modal open it is neccesary include all HTML elements (except modals) inside a ```div``` with the identifier and class ```MOD_supreme-container```

7
doc/index.html
View File

@@ -128,7 +128,7 @@
...
&lt;/div&gt;</code></pre>
<h4>Optionable modals</h4>
<p>A optionable modal is that have multiple submodals inside and the user can navigate it between their.<br>To transform a modal into an optionable you need to add the <code>modal-optionable</code> class and assign a <code>data-stack</code> to it.<br>It is necessary create a instance of <code>MOD_Stack</code> with the same name in the <i>javascript</i></p>
<p>A optionable modal is which have multiple submodals inside and the user can navigate it between their.<br>To transform a modal into an optionable you need to add the <code>modal-optionable</code> class and assign a <code>data-stack</code> to it.<br>It is necessary create a instance of <code>MOD_Stack</code> with the same name in the <i>javascript</i></p>
<p><strong>Example:</strong></p>
<pre><code class="html">&lt;div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standart" tabindex= "-1" role="dialog"&gt;
...
@@ -161,8 +161,9 @@
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h4>Fullscreen modal</h4>
<p>For a fullscreen modal it is necessary add the class <code>fullscreen</code>to the <code>div</code>s with classes <code>modal-dialog</code>, <code>modal-content</code>, <code>modal-header</code> and <code>modal-footer</code>. To make it only for mobile screens you have to add <code>-sm</code> to fullscreen</p>
<p>For a fullscreen modal it is necessary add the class <code>fullscreen</code> to the <code>div</code>s with classes <code>modal-dialog</code>, <code>modal-content</code>, <code>modal-header</code> and <code>modal-footer</code>. To make it only for mobile screens you have to add <code>-sm</code> to fullscreen</p>
<h4>Blur background</h4>
<p>For blur background on modal open it is neccesary include all HTML elements (except modals) inside a div with the identifier and class <code>MOD_supreme-container</code></p>
</div>
</div>