12 Commits

Author SHA1 Message Date
José Luis Garrido Labrador
9963794b86 Add npm link 2020-08-30 17:34:05 +02:00
José Luis Garrido Labrador
28bf564fef Merge branch 'master' of github.com:jlgarridol/modalizer.js into master 2020-08-30 12:24:58 +02:00
José Luis Garrido Labrador
6b0ab3e697 Add new badges 2020-08-30 12:24:51 +02:00
José Luis Garrido-Labrador
29a07101da Update README.md 2020-08-30 11:47:58 +02:00
José Luis Garrido Labrador
fa744e6f4f CDN patched 2020-08-30 11:42:30 +02:00
José Luis Garrido Labrador
f9ef8a07d5 1.0.2 2020-08-30 11:41:31 +02:00
José Luis Garrido Labrador
c66c625a71 Add cdn 2020-08-30 11:40:42 +02:00
José Luis Garrido Labrador
908cf5ed8c Spell check 2020-08-30 11:26:03 +02:00
José Luis Garrido Labrador
e24e2ecdde Update readme.md 2020-08-30 02:28:57 +02:00
José Luis Garrido Labrador
8698ac9d32 Repaired bug in links 2020-08-30 02:27:04 +02:00
José Luis Garrido Labrador
8a956a0c20 Merge branch 'master' of github.com:jlgarridol/modalizer.js into master 2020-08-30 02:04:58 +02:00
José Luis Garrido Labrador
5b179c4f85 Update installation via npm 2020-08-30 02:04:49 +02:00
9 changed files with 42 additions and 46 deletions

View File

@@ -3,19 +3,19 @@ Modalizer.js
Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows. 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/modalizer.js?style=flat) [![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/jlgarridol/modalizer.js?style=flat)](https://github.com/jlgarridol/modalizer.js/releases) ![GitHub file size in bytes](https://img.shields.io/github/size/jlgarridol/modalizer.js/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/modalizer.js/dist/css/modalizer.min.css?color=036fb8&label=size&logo=css3&logoColor=036fb8&style=flat) ![GitHub](https://img.shields.io/github/license/jlgarridol/modalizer.js?style=flat) [![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/jlgarridol/modalizer.js?style=flat)](https://github.com/jlgarridol/modalizer.js/releases) [![npm (scoped)](https://img.shields.io/npm/v/@jlgarridol/modalizer.js)](https://www.npmjs.com/package/@jlgarridol/modalizer.js) ![GitHub file size in bytes](https://img.shields.io/github/size/jlgarridol/modalizer.js/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/modalizer.js/dist/css/modalizer.min.css?color=036fb8&label=size&logo=css3&logoColor=036fb8&style=flat) ![npm (prod) dependency version (scoped)](https://img.shields.io/npm/dependency-version/@jlgarridol/modalizer.js/bootstrap?color=553b7c&label=%20&logo=bootstrap) ![npm (prod) dependency version (scoped)](https://img.shields.io/npm/dependency-version/@jlgarridol/modalizer.js/jquery?color=0f69ae&label=%20&logo=jquery) ![npm (prod) dependency version (scoped)](https://img.shields.io/npm/dependency-version/@jlgarridol/modalizer.js/animate.css?color=e69138)
--- ---
Getting starting Getting starting
-- --
### Installation ### Installation
Via npm Via npm
```bash ```bash
$ npm install modalizer.js $ npm install @jlgarridol/modalizer.js@1.0.2
``` ```
or add it directly using a CDN: or add it directly using a CDN:
```html ```html
<link rel="stylesheet" href="https://future/modalizer.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jlgarridol/modalizer.js@1.0.2/dist/css/modalizer.min.css">
<script src="https://future/modalizer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jlgarridol/modalizer.js@1.0.2/dist/js/modalizer.min.js"></script>
``` ```
### Basic usage ### Basic usage
@@ -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>

View File

@@ -1,6 +1,6 @@
/*! /*!
* Modalizer.js v1.0.0 modalizerjs.jlgarridol.com * Modalizer.js v1.0.1 modalizerjs.jlgarridol.com
* Copyright 2011-2020 José Luis Garrido-Labrador * Copyright 2020 José Luis Garrido-Labrador
* Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE)
*/ */
body { body {

View File

@@ -1,5 +1,5 @@
/*! /*!
* Modalizer.js v1.0.0 modalizerjs.jlgarridol.com * Modalizer.js v1.0.1 modalizerjs.jlgarridol.com
* Copyright 2011-2020 José Luis Garrido-Labrador * Copyright 2020 José Luis Garrido-Labrador
* Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE)
*/body{overflow-x:hidden;overflow-y:scroll!important}.modal{padding-right:0!important}.modal-backdrop.show{display:none}.MOD_supreme-container.modal-open{filter:blur(.5rem)}.modal-content{border:0!important}.modal-optionable{z-index:3000000000;background-color:rgba(0,0,0,.5);padding:0!important}.modal-optionable>.modal-dialog{--animate-duration:0.5s}.modal-optionable .modal-dialog{-webkit-transform:translate(0);-moz-transform:translate(0);transform:translate(0)}.modal-dialog.fullscreen{width:100%!important;height:100%!important;max-height:-moz-fit-content!important;min-height:-moz-fit-content!important;max-height:fit-content!important;min-height:fit-content!important;margin:0!important;padding:0!important;max-width:none!important;background-color:var(--white);opacity:1}.modal-content.fullscreen{height:auto!important;min-height:100%!important;border-radius:0!important}.modal-header.fullscreen{border-bottom:1px solid #9ea2a2!important}.modal-footer.fullscreen{border-top:1px solid #9ea2a2!important}@media (max-width:576px){.modal-dialog.fullscreen-sm{width:100%!important;height:100%!important;max-height:-moz-fit-content!important;min-height:-moz-fit-content!important;max-height:fit-content!important;min-height:fit-content!important;margin:0!important;padding:0!important;max-width:none!important}.modal-content.fullscreen-sm{height:auto!important;min-height:100%!important;max-height:100%!important;border-radius:0!important}.modal-header.fullscreen-sm{border-bottom:1px solid #9ea2a2!important}.modal-footer.fullscreen-sm{border-top:1px solid #9ea2a2!important}} */body{overflow-x:hidden;overflow-y:scroll!important}.modal{padding-right:0!important}.modal-backdrop.show{display:none}.MOD_supreme-container.modal-open{filter:blur(.5rem)}.modal-content{border:0!important}.modal-optionable{z-index:3000000000;background-color:rgba(0,0,0,.5);padding:0!important}.modal-optionable>.modal-dialog{--animate-duration:0.5s}.modal-optionable .modal-dialog{-webkit-transform:translate(0);-moz-transform:translate(0);transform:translate(0)}.modal-dialog.fullscreen{width:100%!important;height:100%!important;max-height:-moz-fit-content!important;min-height:-moz-fit-content!important;max-height:fit-content!important;min-height:fit-content!important;margin:0!important;padding:0!important;max-width:none!important;background-color:var(--white);opacity:1}.modal-content.fullscreen{height:auto!important;min-height:100%!important;border-radius:0!important}.modal-header.fullscreen{border-bottom:1px solid #9ea2a2!important}.modal-footer.fullscreen{border-top:1px solid #9ea2a2!important}@media (max-width:576px){.modal-dialog.fullscreen-sm{width:100%!important;height:100%!important;max-height:-moz-fit-content!important;min-height:-moz-fit-content!important;max-height:fit-content!important;min-height:fit-content!important;margin:0!important;padding:0!important;max-width:none!important}.modal-content.fullscreen-sm{height:auto!important;min-height:100%!important;max-height:100%!important;border-radius:0!important}.modal-header.fullscreen-sm{border-bottom:1px solid #9ea2a2!important}.modal-footer.fullscreen-sm{border-top:1px solid #9ea2a2!important}}

View File

@@ -1,6 +1,6 @@
/*! /*!
* Modalizer.js v1.0.0 modalizerjs.jlgarridol.com * Modalizer.js v1.0.1 modalizerjs.jlgarridol.com
* Copyright 2011-2020 José Luis Garrido-Labrador * Copyright 2020 José Luis Garrido-Labrador
* Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE)
*/ */
@@ -151,10 +151,6 @@ if (typeof $().modal != 'function') {
MOD_animate = null; MOD_animate = null;
}) })
}); });
$("#MOD_supreme-container").click(function(e){
e.preventDefault();
})
}); });

View File

@@ -1,6 +1,6 @@
/*! /*!
* Modalizer.js v1.0.0 modalizerjs.jlgarridol.com * Modalizer.js v1.0.1 modalizerjs.jlgarridol.com
* Copyright 2011-2020 José Luis Garrido-Labrador * Copyright 2020 José Luis Garrido-Labrador
* Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE)
*/ */
let MOD_howManyModals=0,MOD_modalz=9999,MOD_animate="",MOD_oc=null,MOD_optionable=null,MOD_actioned=!1;function boostrapAnimation(modal,animation){var cls=modal.attr("class").split(" ");cls.pop(),cls.push("animate__"+animation),modal.attr("class",cls.join(" "))}function launchModal(modal){var animation=modal.data("animate-in")||null;null!=animation&&modal.addClass("animate__"+animation),modal.hasClass("show")?(modal.removeClass("show"),setTimeout((function(){modal.css("z-index",++MOD_modalz),modal.addClass("show")}),500)):(setCurrentModal(modal),modal.hasClass("modal-optionable")||MOD_howManyModals++,modal.modal("show")),modal.css("display","block"),setTimeout((function(){null!=animation&&modal.removeClass("animate__"+animation)}),1e3),$("#MOD_supreme-container").addClass("modal-open")}function resetmodals(){let curmodal;MOD_CURRENTMODAL.pop().modal("hide")}function afterresetmodal(curmodal){let stack=eval(curmodal.data("stack"));null!=stack&&stack.clean();let loop=0,anim=curmodal.data("animate-in")||null;curmodal.children("div").each((function(){let modal=$(this);boostrapAnimation(modal,"fadeInRight"),0==loop?(modal.css("display",""),null!=anim&&boostrapAnimation(modal,anim)):modal.css("display","none"),loop++}))}function setCurrentModal(modal){MOD_CURRENTMODAL.push(modal)}"function"!=typeof $().modal?console.error("Bootstrap modals not loaded"):$(document).ready((function(){$(".modalinit").each((function(){$(this).click((function(){let btn=$(this),modal=$("#"+btn.data("modal"));0!=modal.length&&launchModal(modal)}))})),$(".nextaction").each((function(){$(this).click((function(){let btn=$(this),stack=eval(MOD_CURRENTMODAL.peek().data("stack")),nexttext=btn.data("next")||"",dialog=btn.closest("div.modal-dialog");MOD_optionable={dialog:dialog,nexttext:nexttext,stack:stack,next:!0},MOD_actioned=!0,boostrapAnimation(dialog,"fadeOutLeftBig")}))})),$(".beforeaction").each((function(){$(this).click((function(){let btn=$(this),stack=eval(MOD_CURRENTMODAL.peek().data("stack")),before=stack.pop(),dialog=btn.closest("div.modal-dialog");MOD_optionable={before:before,dialog:dialog,next:!1},MOD_actioned=!0,boostrapAnimation(dialog,"fadeOutRightBig")}))})),$(".modal-dialog.animate__animated").each((function(){$(this).on("animationend",(function(e){if(null!=MOD_optionable&&MOD_actioned)if(MOD_actioned=!1,MOD_optionable.dialog.hide(),MOD_optionable.next)if(MOD_optionable.stack.push(MOD_optionable.dialog.attr("id")),""!=MOD_optionable.nexttext){let next=$("#"+MOD_optionable.nexttext);boostrapAnimation(next,"fadeInRightBig"),next.show()}else resetmodals();else if(null!=MOD_optionable.before){let before=$("#"+MOD_optionable.before);boostrapAnimation(before,"fadeInLeftBig"),before.show()}else MOD_optionable.dialog.show(),resetmodals()}))})),$(".modal.modalizer").each((function(){$(this).on("show.bs.modal",(function(){let it=$(this);it.hasClass("modal-optionable")||($("#MOD_supreme-container").addClass("modal-open"),it.css("z-index",++MOD_modalz))})),$(this).on("hide.bs.modal",(function(e){e.preventDefault();let it=$(this);var animation=it.data("animate-out")||null;null!=animation&&it.addClass("animate__"+animation),MOD_animate=animation,MOD_oc=it,it.removeClass("show"),MOD_modalz--,$('.modal[style*="display: block"]').length>1?$("#MOD_supreme-container").addClass("modal-open"):($("#MOD_supreme-container").removeClass("modal-open"),$("body").removeClass("modal-open"))}))})),$(".closemodal").each((function(){$(this).click((function(){let modal;$(this).closest("div.modal").modal("hide"),resetmodals()}))})),$(".modal.modalizer.animate__animated").each((function(){$(this).on("animationend",(function(e){let it=$(this);null!=MOD_animate&&it.removeClass("animate__"+MOD_animate),null!=MOD_oc&&(MOD_oc.css("display","none"),MOD_oc.hasClass("modal-optionable")&&afterresetmodal(MOD_oc)),MOD_oc=null,MOD_animate=null}))})),$("#MOD_supreme-container").click((function(e){e.preventDefault()}))}));class MOD_Stack{constructor(){this.items=[]}push(element){this.items.push(element)}pop(){return this.isEmpty()?null:this.items.pop()}peek(){return this.items[this.items.length-1]}isEmpty(){return 0==this.items.length}clean(){this.items=[]}}function removeItemOnce(arr,value){var index=arr.indexOf(value);return index>-1&&arr.splice(index,1),arr}const MOD_CURRENTMODAL=new MOD_Stack; let MOD_howManyModals=0,MOD_modalz=9999,MOD_animate="",MOD_oc=null,MOD_optionable=null,MOD_actioned=!1;function boostrapAnimation(modal,animation){var cls=modal.attr("class").split(" ");cls.pop(),cls.push("animate__"+animation),modal.attr("class",cls.join(" "))}function launchModal(modal){var animation=modal.data("animate-in")||null;null!=animation&&modal.addClass("animate__"+animation),modal.hasClass("show")?(modal.removeClass("show"),setTimeout((function(){modal.css("z-index",++MOD_modalz),modal.addClass("show")}),500)):(setCurrentModal(modal),modal.hasClass("modal-optionable")||MOD_howManyModals++,modal.modal("show")),modal.css("display","block"),setTimeout((function(){null!=animation&&modal.removeClass("animate__"+animation)}),1e3),$("#MOD_supreme-container").addClass("modal-open")}function resetmodals(){let curmodal;MOD_CURRENTMODAL.pop().modal("hide")}function afterresetmodal(curmodal){let stack=eval(curmodal.data("stack"));null!=stack&&stack.clean();let loop=0,anim=curmodal.data("animate-in")||null;curmodal.children("div").each((function(){let modal=$(this);boostrapAnimation(modal,"fadeInRight"),0==loop?(modal.css("display",""),null!=anim&&boostrapAnimation(modal,anim)):modal.css("display","none"),loop++}))}function setCurrentModal(modal){MOD_CURRENTMODAL.push(modal)}"function"!=typeof $().modal?console.error("Bootstrap modals not loaded"):$(document).ready((function(){$(".modalinit").each((function(){$(this).click((function(){let btn=$(this),modal=$("#"+btn.data("modal"));0!=modal.length&&launchModal(modal)}))})),$(".nextaction").each((function(){$(this).click((function(){let btn=$(this),stack=eval(MOD_CURRENTMODAL.peek().data("stack")),nexttext=btn.data("next")||"",dialog=btn.closest("div.modal-dialog");MOD_optionable={dialog:dialog,nexttext:nexttext,stack:stack,next:!0},MOD_actioned=!0,boostrapAnimation(dialog,"fadeOutLeftBig")}))})),$(".beforeaction").each((function(){$(this).click((function(){let btn=$(this),stack=eval(MOD_CURRENTMODAL.peek().data("stack")),before=stack.pop(),dialog=btn.closest("div.modal-dialog");MOD_optionable={before:before,dialog:dialog,next:!1},MOD_actioned=!0,boostrapAnimation(dialog,"fadeOutRightBig")}))})),$(".modal-dialog.animate__animated").each((function(){$(this).on("animationend",(function(e){if(null!=MOD_optionable&&MOD_actioned)if(MOD_actioned=!1,MOD_optionable.dialog.hide(),MOD_optionable.next)if(MOD_optionable.stack.push(MOD_optionable.dialog.attr("id")),""!=MOD_optionable.nexttext){let next=$("#"+MOD_optionable.nexttext);boostrapAnimation(next,"fadeInRightBig"),next.show()}else resetmodals();else if(null!=MOD_optionable.before){let before=$("#"+MOD_optionable.before);boostrapAnimation(before,"fadeInLeftBig"),before.show()}else MOD_optionable.dialog.show(),resetmodals()}))})),$(".modal.modalizer").each((function(){$(this).on("show.bs.modal",(function(){let it=$(this);it.hasClass("modal-optionable")||($("#MOD_supreme-container").addClass("modal-open"),it.css("z-index",++MOD_modalz))})),$(this).on("hide.bs.modal",(function(e){e.preventDefault();let it=$(this);var animation=it.data("animate-out")||null;null!=animation&&it.addClass("animate__"+animation),MOD_animate=animation,MOD_oc=it,it.removeClass("show"),MOD_modalz--,$('.modal[style*="display: block"]').length>1?$("#MOD_supreme-container").addClass("modal-open"):($("#MOD_supreme-container").removeClass("modal-open"),$("body").removeClass("modal-open"))}))})),$(".closemodal").each((function(){$(this).click((function(){let modal;$(this).closest("div.modal").modal("hide"),resetmodals()}))})),$(".modal.modalizer.animate__animated").each((function(){$(this).on("animationend",(function(e){let it=$(this);null!=MOD_animate&&it.removeClass("animate__"+MOD_animate),null!=MOD_oc&&(MOD_oc.css("display","none"),MOD_oc.hasClass("modal-optionable")&&afterresetmodal(MOD_oc)),MOD_oc=null,MOD_animate=null}))}))}));class MOD_Stack{constructor(){this.items=[]}push(element){this.items.push(element)}pop(){return this.isEmpty()?null:this.items.pop()}peek(){return this.items[this.items.length-1]}isEmpty(){return 0==this.items.length}clean(){this.items=[]}}function removeItemOnce(arr,value){var index=arr.indexOf(value);return index>-1&&arr.splice(index,1),arr}const MOD_CURRENTMODAL=new MOD_Stack;

View File

@@ -41,7 +41,7 @@
<h5 class="col-7 text-center font-weight-normal">Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows.</h5> <h5 class="col-7 text-center font-weight-normal">Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows.</h5>
<h6 class="col-12 text-right font-weight-bold">Licensed under MIT, created by José Luis Garrido-Labrador</h6> <h6 class="col-12 text-right font-weight-bold">Licensed under MIT, created by José Luis Garrido-Labrador</h6>
<hr class="col-4 offset-4"/> <hr class="col-4 offset-4"/>
<h2 class="col-12 text-center">See it on <a href="https://github.com/jlgarridol/modalizerjs">GitHub</a></h2> <h2 class="col-12 text-center">See it on <a href="https://github.com/jlgarridol/modalizer.js">GitHub</a></h2>
</div> </div>
<hr> <hr>
<div class="row"> <div class="row">
@@ -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>
@@ -100,7 +100,7 @@
<div class="mx-4 my-2"> <div class="mx-4 my-2">
<h4>Installation</h4> <h4>Installation</h4>
<p>Via npm</p> <p>Via npm</p>
<pre><code class="shell">$ npm install modalizer.js</code></pre> <pre><code class="shell">$ npm install @jlgarridol/modalizer.js@1.0.1</code></pre>
<p>or add it directly using a CDN:</p> <p>or add it directly using a CDN:</p>
<pre><code class="html">&lt;link rel="stylesheet" href="https://future/modalizer.min.css"/&gt; <pre><code class="html">&lt;link rel="stylesheet" href="https://future/modalizer.min.css"/&gt;
&lt;script src="https://future/modalizer.min.js"&gt;&lt;/script&gt;</code></pre> &lt;script src="https://future/modalizer.min.js"&gt;&lt;/script&gt;</code></pre>
@@ -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>
@@ -271,9 +271,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal-dialog modal-dialog-centered modal-dialog-fullscreen modal-dialog-scrollable animate__animated animate__faster" id="lpage" style="display: none;" role="document"> <div class="modal-dialog modal-dialog-centered fullscreen modal-dialog-scrollable animate__animated animate__faster" id="lpage" style="display: none;" role="document">
<div class="modal-content fullscreen"> <div class="modal-content fullscreen">
<div class="modal-header modal-header-fullscreen"> <div class="modal-header fullscreen">
<h5 class="modal-title">Optionable modal</h5> <h5 class="modal-title">Optionable 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>
@@ -282,7 +282,7 @@
<div class="modal-body mx-0"> <div class="modal-body mx-0">
<h1>Fullscreen block in optionable</h1> <h1>Fullscreen block in optionable</h1>
</div> </div>
<div class="modal-footer modal-footer-fullscreen"> <div class="modal-footer fullscreen">
<div class="container-fluid"> <div class="container-fluid">
<div class="row align-items-center"> <div class="row align-items-center">
<h5 class="col-3">Page 2/2</h5> <h5 class="col-3">Page 2/2</h5>

View File

@@ -1,6 +1,6 @@
{ {
"name": "@jlgarridol/modalizer.js", "name": "@jlgarridol/modalizer.js",
"version": "1.0.0", "version": "1.0.2",
"description": "Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows.", "description": "Lightweight extension over bootstrap's modals to improve of the control, animations and visualization of modal windows.",
"main": "dist/js/modalizer.js", "main": "dist/js/modalizer.js",
"style": "dist/css/modalizer.css", "style": "dist/css/modalizer.css",
@@ -9,7 +9,7 @@
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/jlgarridol/modalizerjs.git" "url": "git+https://github.com/jlgarridol/modalizer.js.git"
}, },
"keywords": [ "keywords": [
"bootstrap", "bootstrap",
@@ -22,7 +22,7 @@
"author": "Jose Luis Garrido-Labrador", "author": "Jose Luis Garrido-Labrador",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/jlgarridol/modalizerjs/issues" "url": "https://github.com/jlgarridol/modalizer.js/issues"
}, },
"homepage": "http://modalizerjs.jlgarridol.com", "homepage": "http://modalizerjs.jlgarridol.com",
"dependencies": { "dependencies": {

View File

@@ -1,6 +1,6 @@
/*! /*!
* Modalizer.js v1.0.0 modalizerjs.jlgarridol.com * Modalizer.js v1.0.1 modalizerjs.jlgarridol.com
* Copyright 2011-2020 José Luis Garrido-Labrador * Copyright 2020 José Luis Garrido-Labrador
* Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE)
*/ */
body { body {

View File

@@ -1,6 +1,6 @@
/*! /*!
* Modalizer.js v1.0.0 modalizerjs.jlgarridol.com * Modalizer.js v1.0.1 modalizerjs.jlgarridol.com
* Copyright 2011-2020 José Luis Garrido-Labrador * Copyright 2020 José Luis Garrido-Labrador
* Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE) * Licensed under MIT (https://github.com/jlgarridol/modalizerjs/blob/main/LICENSE)
*/ */
@@ -152,9 +152,9 @@ if (typeof $().modal != 'function') {
}) })
}); });
$("#MOD_supreme-container").click(function(e){ /*$("#MOD_supreme-container").click(function(e){
e.preventDefault(); e.preventDefault();
}) });*/
}); });