mirror of
https://github.com/jlgarridol/Modalizer.js.git
synced 2026-02-14 17:11:37 +01:00
391 lines
25 KiB
HTML
391 lines
25 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Modalizer.js</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/lux/bootstrap.min.css" integrity="sha384-9+PGKSqjRdkeAU7Eu4nkJU8RFaH8ace8HGXnkiKMP9I9Te0GJ4/km3L1Z8tXigpG" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/solarized-dark.min.css">
|
|
<link rel="stylesheet" href="../src/modalizer.css" />
|
|
|
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Source Sans Pro', sans-serif !important;
|
|
}
|
|
pre {
|
|
font-family: 'Source Code Pro', monospace !important;
|
|
}
|
|
code{
|
|
color:#268bd2;
|
|
}
|
|
code.hljs{
|
|
padding: 1rem;
|
|
border-radius: 5px;
|
|
}
|
|
.btn {
|
|
font-size: 1.76rem !important;
|
|
}
|
|
strong{
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="MOD_supreme-container" id="MOD_supreme-container"> <!--All elements must be inside supreme-container except modals-->
|
|
<div class="container-md min-vh-100 d-flex align-items-stretch justify-content-center">
|
|
<div class="jumbotron container-fluid flex-fill my-0">
|
|
<div class="row justify-content-center">
|
|
<h1 class="col-12 text-center">Modalizer.js</h1>
|
|
<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>
|
|
<hr class="col-4 offset-4"/>
|
|
<h2 class="col-12 text-center">See it on <a href="https://github.com/jlgarridol/modalizer.js">GitHub</a></h2>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<h2 class="col-12 text-center font-weight-bold">Examples</h2>
|
|
<hr class="col-6 offset-3">
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-sm-12 col-md-4">
|
|
<h3>Defaults modals</h3>
|
|
<div class="container">
|
|
<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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<div class="mx-2 my-5">
|
|
<button class="modalinit btn btn-lg btn-success col-12 py-3 font-weight-bold" data-modal="fullscreen_mobile">Fullscreen on mobile modal</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<h3>Optionable modals</h3>
|
|
<div class="container">
|
|
<div class="mx-2 my-5">
|
|
<button class="modalinit btn btn-lg btn-danger col-12 py-3 font-weight-bold" data-modal="optionable">Optionable</button>
|
|
</div>
|
|
</div>
|
|
<h3 class="">Modal over modal</h3>
|
|
<div class="container">
|
|
<div class="mx-2 my-5">
|
|
<button class="modalinit btn btn-lg btn-secondary col-12 py-3 font-weight-bold" data-modal="overmodal">Modal over modal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<h3>Custom animated modals</h3>
|
|
<div class="mx-2 my-5">
|
|
<button class="modalinit btn btn-lg btn-warning col-12 py-3 font-weight-bold" data-modal="updown">Up-Down modal</button>
|
|
</div>
|
|
<div class="mx-2 my-5">
|
|
<button class="modalinit btn btn-lg btn-info col-12 py-3 font-weight-bold" data-modal="flipflop">Flip modal</button>
|
|
</div>
|
|
<h4 class="">Customize with <br><a class="btn btn-link" href="https://animate.style/">Animate.css</a></h4>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div class="row">
|
|
<h2 class="col-12 text-center font-weight-bold">Getting starting</h2>
|
|
<hr class="col-6 offset-3"/>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="contiainer">
|
|
<div class="mx-4 my-2">
|
|
<h4>Installation</h4>
|
|
<p>Via npm</p>
|
|
<pre><code class="shell">$ npm install @jlgarridol/modalizer.js@1.0.1</code></pre>
|
|
<p>or add it directly using a CDN:</p>
|
|
<pre><code class="html"><link rel="stylesheet" href="https://future/modalizer.min.css"/>
|
|
<script src="https://future/modalizer.min.js"></script></code></pre>
|
|
<h4>Basic usage</h4>
|
|
<h5>Launch modal</h5>
|
|
<p>Add class <code>modalinit</code> and modal's identifier in <code>data-modal</code> attribute to a <code><a></code>, <code><buttom></code> or any else HTML element.</p>
|
|
<p>Add class <code>modalizer</code> to the modal <code>div</code></p>
|
|
<p><strong>Example:</strong></p>
|
|
<pre><code class="html"><a class="modalinit" data-modal="standart" href="#"> Click to open</a>
|
|
|
|
<div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog">
|
|
...
|
|
</div></code></pre>
|
|
<h5>Close a modal</h5>
|
|
<p>Add class <code>closemodal</code> to a <code><a></code>, <code><buttom></code> or any else HTML element inside a modal <code>div</code></code>.</p>
|
|
<p><strong>Example:</strong></p>
|
|
<pre><code class="html"><div class="modal modalizer fade" id="standart" tabindex= "-1" role="dialog">
|
|
...
|
|
<button class="closemodal">Close</button>
|
|
...
|
|
</div></code></pre>
|
|
<h5>Animate a modal</h5>
|
|
<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><strong>Example:</strong></p>
|
|
<pre><code class="html"><div class="modal modalizer animate__animated" id="standart" tabindex= "-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
|
|
...
|
|
</div></code></pre>
|
|
<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><strong>Example:</strong></p>
|
|
<pre><code class="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></code></pre>
|
|
<h5>Create submodals</h5>
|
|
<p>
|
|
The submodals are the <code>modal-dialog</code> with <code>role="document"</code> and have full compatibility with classes for <code>modal-dialog</code> in <i>Bootstrap</i> like <code>centered</code> or <code>scrollable.</code>
|
|
<br>Any submodal, except the first, must have the style attribute <code>display: none</code>.
|
|
</p>
|
|
<p>To navigate between submodals exists two classes: <code>nextaction</code> and <code>beforeaction</code> to apply to a <code><a></code>, <code><button></code> or any alse HTML element.<br>
|
|
Also, it is necessary to add the attribute <code>data-next</code> with the identifier of the next submodal. If this attribute is not there then the modal will end.
|
|
<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>
|
|
<p><strong>Example</strong></p>
|
|
<pre><code class="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></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>
|
|
<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>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="page-footer font-small blue">
|
|
|
|
<!-- Copyright -->
|
|
<div class="footer-copyright text-center py-3">Licenced under MIT<br>© 2020 Copyright:
|
|
<a href="https://jlgarridol.com/">José Luis Garrido-Labrador</a>
|
|
</div>
|
|
<!-- Copyright -->
|
|
|
|
</footer>
|
|
<!-- Footer -->
|
|
</div>
|
|
|
|
<!--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-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Standart modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0 d-flex flex-column">
|
|
<p>Modal body text goes here.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary closemodal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modalizer animate__animated animate__fast" id="fullscreen" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable fullscreen" role="document">
|
|
<div class="modal-content fullscreen">
|
|
<div class="modal-header fullscreen">
|
|
<h5 class="modal-title">Fullscreen modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0 d-flex flex-column">
|
|
<p>Modal body text goes here.</p>
|
|
</div>
|
|
<div class="modal-footer fullscreen">
|
|
<button type="button" class="btn btn-secondary closemodal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modalizer animate__animated animate__fast" id="fullscreen_mobile" tabindex="-1" role="dialog" data-animate-in="zoomIn" data-animate-out="zoomOut">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable fullscreen-sm" role="document">
|
|
<div class="modal-content fullscreen-sm">
|
|
<div class="modal-header fullscreen-sm">
|
|
<h5 class="modal-title">Fullscreen on mobile modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0 d-flex flex-column">
|
|
<p>Modal body text goes here.</p>
|
|
</div>
|
|
<div class="modal-footer fullscreen-sm">
|
|
<button type="button" class="btn btn-secondary closemodal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modalizer modal-optionable animate__animated animate__fast" tabindex="-1" id="optionable" data-stack="defaultstack" role="dialog" data-animate-in="fadeInRight" data-animate-out="fadeOutLeft">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable animate__animated animate__faster" id="fpage" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Optionable modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0">
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="container-fluid">
|
|
<div class="row align-items-center">
|
|
<h5 class="col-3">Page 1/2</h5>
|
|
<div class="col-4 offset-1 d-flex justify-content-end">
|
|
<button type="button" class="btn btn-danger btn-block btn-sm beforeaction">Before</button>
|
|
</div>
|
|
<div class="col-4 d-flex justify-content-end">
|
|
<button type="button" class="btn btn-block btn-success btn-sm nextaction" data-next="lpage" >Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-header fullscreen">
|
|
<h5 class="modal-title">Optionable modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0">
|
|
<h1>Fullscreen block in optionable</h1>
|
|
</div>
|
|
<div class="modal-footer fullscreen">
|
|
<div class="container-fluid">
|
|
<div class="row align-items-center">
|
|
<h5 class="col-3">Page 2/2</h5>
|
|
<div class="col-4 offset-1 d-flex justify-content-end">
|
|
<button type="button" class="btn btn-danger btn-block btn-sm beforeaction">Before</button>
|
|
</div>
|
|
<div class="col-4 d-flex justify-content-end">
|
|
<button type="button" class="btn btn-block btn-success btn-sm nextaction" >Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modalizer animate__animated animate__fast" id="overmodal" data-backdrop="static" 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-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Modal which launch another modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0 d-flex flex-column">
|
|
<p>Modal body text goes here.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary modalinit" data-modal="overmodal2">Go to another modal</button>
|
|
<button type="button" class="btn btn-secondary closemodal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modalizer animate__animated animate__fast" id="overmodal2" data-backdrop="static" 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-content" style="width: 600px;">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Another modal which launch a modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0 d-flex flex-column">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet quam eget massa volutpat eleifend. Etiam dolor urna, fermentum at venenatis vitae, dignissim et quam. Curabitur eget mi ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae risus ullamcorper, interdum erat nec, accumsan ligula. Vestibulum libero ligula, interdum nec urna non, porttitor consequat augue. Integer non dapibus dui, eget tempor erat. Aliquam at leo id dui bibendum semper. Fusce elementum nibh nec pharetra maximus. Vivamus sed ex erat. Integer eu sapien lacus.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary closemodal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modalizer animate__animated animate__fast" id="updown" tabindex="-1" role="dialog" data-animate-in="slideInUp" data-animate-out="slideOutDown">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Up-Down modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0 d-flex flex-column">
|
|
<p>Modal body text goes here.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary closemodal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modalizer animate__animated animate__fast" id="flipflop" tabindex="-1" role="dialog" data-animate-in="flipInY" data-animate-out="flipOutX">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Flip modal</h5>
|
|
<button type="button" class="close align-self-end closemodal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body mx-0 d-flex flex-column">
|
|
<p>Modal body text goes here.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary closemodal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
|
|
<script src="../src/modalizer.js"></script>
|
|
<script>
|
|
const defaultstack = new MOD_Stack(); //Default stack for a modals
|
|
</script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
</body>
|
|
</html>
|