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

Spell check

Browse Source
This commit is contained in:
José Luis Garrido Labrador
2020-08-30 11:26:03 +02:00
parent e24e2ecdde
commit 908cf5ed8c
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@@ -26,9 +26,9 @@ Add class ```modalizer``` to the modal div.
**Example:** **Example:**
```html ```html
<a class="modalinit" data-modal="standart" href="#"> Click to open</a> <a class="modalinit" data-modal="standard" href="#"> Click to open</a>
<div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog"> <div class="modal modalizer fade" id="standard" tabindex= "-1" role="dialog">
... ...
</div> </div>
``` ```
@@ -38,7 +38,7 @@ Add class ```closemodal``` to a ```<a>```, ```<buttom>``` or any else HTML eleme
**Example:** **Example:**
```html ```html
<div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog"> <div class="modal modalizer fade" id="standard" tabindex= "-1" role="dialog">
... ...
<button class="closemodal">Close</button> <button class="closemodal">Close</button>
... ...
@@ -53,7 +53,7 @@ Add ```data-animate-in``` and ```data-animate-out``` with Animate.css animation
**Example:** **Example:**
```html ```html
<div class="modal modalizer animate__animated" id="standart" tabindex= "-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut"> <div class="modal modalizer animate__animated" id="standard" tabindex= "-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
... ...
</div> </div>
``` ```
@@ -66,7 +66,7 @@ It is necessary create a instance of ```MOD_Stack``` with the same name in the *
**Example:** **Example:**
```html ```html
<div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standart" tabindex= "-1" role="dialog"> <div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standard" tabindex= "-1" role="dialog">
... ...
</div> </div>
<script> <script>
@@ -88,7 +88,7 @@ In addition, to enable the animation between submodals it is necessary add class
**Example:** **Example:**
```html ```html
<div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standart" tabindex= "-1" role="dialog"> <div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standard" tabindex= "-1" role="dialog">
<div class="modal-dialog animate__animated" id="first_submodal" role="document"> <div class="modal-dialog animate__animated" id="first_submodal" role="document">
... ...
<button class="beforeaction">Before</button> <button class="beforeaction">Before</button>

18
doc/index.html
View File

@@ -53,7 +53,7 @@
<h3>Defaults modals</h3> <h3>Defaults modals</h3>
<div class="container"> <div class="container">
<div class="mx-2 my-5"> <div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-primary col-12 py-3 font-weight-bold" data-modal="standart" >Standart modal</button> <button class="modalinit btn btn-lg btn-primary col-12 py-3 font-weight-bold" data-modal="standard" >standard modal</button>
</div> </div>
<div class="mx-2 my-5"> <div class="mx-2 my-5">
<button class="modalinit btn btn-lg btn-warning col-12 py-3 font-weight-bold" data-modal="fullscreen">Fullscreen modal</button> <button class="modalinit btn btn-lg btn-warning col-12 py-3 font-weight-bold" data-modal="fullscreen">Fullscreen modal</button>
@@ -109,15 +109,15 @@
<p>Add class <code>modalinit</code> and modal's identifier in <code>data-modal</code> attribute to a <code>&lt;a&gt;</code>, <code>&lt;buttom&gt;</code> or any else HTML element.</p> <p>Add class <code>modalinit</code> and modal's identifier in <code>data-modal</code> attribute to a <code>&lt;a&gt;</code>, <code>&lt;buttom&gt;</code> or any else HTML element.</p>
<p>Add class <code>modalizer</code> to the modal <code>div</code></p> <p>Add class <code>modalizer</code> to the modal <code>div</code></p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="html">&lt;a class="modalinit" data-modal="standart" href="#"&gt; Click to open&lt;/a&gt; <pre><code class="html">&lt;a class="modalinit" data-modal="standard" href="#"&gt; Click to open&lt;/a&gt;
&lt;div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog"&gt; &lt;div class="modal modalizer fade" id="standard" tabindex= "-1" role="dialog"&gt;
... ...
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
<h5>Close a modal</h5> <h5>Close a modal</h5>
<p>Add class <code>closemodal</code> to a <code>&lt;a&gt;</code>, <code>&lt;buttom&gt;</code> or any else HTML element inside a modal <code>div</code></code>.</p> <p>Add class <code>closemodal</code> to a <code>&lt;a&gt;</code>, <code>&lt;buttom&gt;</code> or any else HTML element inside a modal <code>div</code></code>.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="html">&lt;div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog"&gt; <pre><code class="html">&lt;div class="modal modalizer fade" id="standard" tabindex= "-1" role="dialog"&gt;
... ...
&lt;button class="closemodal"&gt;Close&lt;/button&gt; &lt;button class="closemodal"&gt;Close&lt;/button&gt;
... ...
@@ -126,13 +126,13 @@
<p>Use a <strong>Animate.css</strong> animation for open and close animation</p> <p>Use a <strong>Animate.css</strong> animation for open and close animation</p>
<p>Add <code>data-animate-in</code> and <code>data-animate-out</code> with <i>Animate.css</i> animation (without animate__), remove class <code>fade</code> and add class <code>animate__animated</code> in modal</p> <p>Add <code>data-animate-in</code> and <code>data-animate-out</code> with <i>Animate.css</i> animation (without animate__), remove class <code>fade</code> and add class <code>animate__animated</code> in modal</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="html">&lt;div class="modal modalizer animate__animated" id="standart" tabindex= "-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut"&gt; <pre><code class="html">&lt;div class="modal modalizer animate__animated" id="standard" tabindex= "-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut"&gt;
... ...
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
<h4>Optionable modals</h4> <h4>Optionable modals</h4>
<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>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> <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; <pre><code class="html">&lt;div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standard" tabindex= "-1" role="dialog"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
&lt;script&gt; &lt;script&gt;
@@ -148,7 +148,7 @@
<br>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. <br>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.
<br>In addition, to enable the animation between submodals it is necessary add class <code>animate__animated</code> in the submodal.</p> <br>In addition, to enable the animation between submodals it is necessary add class <code>animate__animated</code> in the submodal.</p>
<p><strong>Example</strong></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; <pre><code class="html">&lt;div class="modal modalizer fade modal-optionable" data-stack="defaultStack" id="standard" tabindex= "-1" role="dialog"&gt;
&lt;div class="modal-dialog animate__animated" id="first_submodal" role="document"&gt; &lt;div class="modal-dialog animate__animated" id="first_submodal" role="document"&gt;
... ...
&lt;button class="beforeaction"&gt;Before&lt;/button&gt; &lt;button class="beforeaction"&gt;Before&lt;/button&gt;
@@ -187,11 +187,11 @@
</div> </div>
<!--Modals--> <!--Modals-->
<div class="modal modalizer animate__animated animate__fast" id="standart" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut"> <div class="modal modalizer animate__animated animate__fast" id="standard" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Standart modal</h5> <h5 class="modal-title">standard modal</h5>
<button type="button" class="close align-self-end closemodal"> <button type="button" class="close align-self-end closemodal">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>