susmodal
Version:
Simple library for displaying modals
184 lines (136 loc) • 5.81 kB
Markdown
# SUSModal
#### Library for displaying modals (No dependencies)
> (SUS) Simplicity is the ultimate sophistication - Leonardo da Vinci
Keyboard navigation: Tab for changing the focus on the elements and Escape for hiding the modal
## Getting started
Install as a package
```
npm i susmodal
```
or use a CDN
```
Javascript
<script src="https://unpkg.com/susmodal/src/susmodal.js"></script>
<script src="https://unpkg.com/susmodal/src/susmodal.min.js"></script>
CSS
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.css"></link>
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.min.css"></link>
```
... here is an example of modal without css decoration
```
<!-- Choose an id, for example my-modal -->
<div id="my-modal" class="susmodal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<!-- Don't change this id: susmodal-content -->
<div id="susmodal-content" class="susmodal-content">
<div class="susmodal-body">
<p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modals </p>
</div>
<hr>
<div class="susmodal-footer">
<!-- Facultative but you can use the class "susmodal-close-btn" among the elements you want for closing the modal -->
<button type="button" class="susmodal-close-btn">Cancel</button>
<button type="button" class="susmodal-confirm-btn">Confirm</button>
</div>
</div>
</div>
</div>
```
... import in js file or use script:src
```
// with webpack
import SUSModal from "susmodal";
// if you don't import (not the same path)
<script src="node_modules/susmodal/src/susmodal.js"></script>
<script src="node_modules/susmodal/src/susmodal.min.js"></script>
```
... script with basic configuration
```
const MySUSModal = new SUSModal( {
id: 'my-modal',
}
);
// for example, display the modal when you click on a button
let btnDisplayModal = document.getElementById("display-modal")
btnDisplayModal.addEventListener('click', () => {
MySUSModal.show();
});
```
... configuration options
```
// default values in class constructor:
id: null,
animation: "fade", //fade animation or movement : "left", "top", "right", "bottom"
animationDuration: 400, // milliseconds
width: "400px", // apply your own CSS Units
height: "auto", // idem
backgroundDark: false, // background of the page (try and you will see :) )
// pay attention to your CSS framework
finalPosition: "auto", // Use the margin CSS property, for example "10% 35%"
```
... methods for displaying and hiding the modal
```
// display
MySUSModal.show()
// hide
MySUSModal.hide()
```
... add the core CSS
```
// import or require with webpack
// or add local link
<link rel="stylesheet" href="node_modules/susmodal/src/modal.css">
<link rel="stylesheet" href="node_modules/susmodal/src/modal.min.css">
// or use a CDN
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.css"></link>
<link rel="stylesheet" href="https://unpkg.com/susmodal/src/modal.min.css"></link>
```
... and that's it for the functionnal aspect.
## CSS
> Please send me html components for others CSS frameworks (tested and adapted to the library) and i will add them to the documentation
> Also tell me about your integration experiences and i will add recommandations in future releases
### Bootstrap 4
```
<!-- Choose an id, for example my-modal -->
<div id="my-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<!-- Don't change this id: susmodal-content -->
<div id="susmodal-content" class="modal-content">
<div class="modal-body">
<p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modal </p>
</div>
<hr>
<div class="modal-footer">
<!-- Facultative but you can use the class "susmodal-close-btn" among the elements you want for closing the modal -->
<button type="button" class="btn btn-secondary susmodal-close-btn">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
```
### Bulma
```
<!-- Choose an id, for example my-bulma-modal -->
<div id="my-bulma-modal" class="modal">
<!-- If you want to use backgroundDark property, you should add this tag instead of -->
<div class="modal-background"></div>
<!-- Don't change this id: susmodal-content -->
<div id="susmodal-content" class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<!-- Facultative but you can use the class "susmodal-close-btn" on elements for close the modal -->
<button class="delete susmodal-close-btn" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
<p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modals (Bulma CSS) </p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<!-- Facultative but you can use the class "susmodal-close-btn" on elements for close the modal -->
<button class="button susmodal-close-btn">Cancel</button>
</footer>
</div>
</div>
```