0.2.42 • Published 3 years ago
ds-modal-js v0.2.42
ds-modal-js
ds-modal-js - lightweight and easy to use javascript modal dialog
Demo
github.io codepen.io
Advantages
- Easy to use
- Has no dependencies
- Small size (less than 5kb min+gzip)
- Closing modal on overlay click
- Using data attributes
How to use in older browsers
For older browsers please use promise-polyfill
Use without installation
Add this line to head
<link href="https://unpkg.com/ds-modal-js/dist/ds-modal.min.css" rel="stylesheet">Add this line to the bottom of the body
<script src="https://unpkg.com/ds-modal-js/dist/ds-modal.min.js"></script>Simple working example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>ds-modal-js</title>
<link href="https://unpkg.com/ds-modal-js/dist/ds-modal.min.css" rel="stylesheet">
</head>
<body>
<button data-ds-modal-open="example-modal">
Open example modal
</button>
<div class="ds-modal__container" data-ds-modal="example-modal">
<div class="ds-modal__wrapper">
<div class="ds-modal">
<div class="ds-modal__close-button" data-ds-modal-close="example-modal"></div>
<div class="ds-modal__header">Example</div>
<div class="ds-modal__body">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="ds-modal__footer"></div>
</div>
</div>
</div>
<script src="https://unpkg.com/ds-modal-js/dist/ds-modal.min.js"></script>
</body>
</html>Installation
npm install ds-modal-js -saveimport dsModal from 'ds-modal-js';@import 'ds-modal-js/dist/ds-modal.min.css';Use in automatic mode
Specify data-ds-modal-open="example-modal" on the button and data-ds-modal="example-modal" on the modal. This is enough to work.
API
dsModal.open("example-modal"); // open modal data-ds-modal="example-modal"dsModal.close("example-modal"); // close modal data-ds-modal="example-modal"dsModal.status(); // show statusdsModal.config({"logs": false}); // show logs in console (true/false, default false)dsModal.config({"outClick": true}); // close modal on overlay click (true/false, default true)dsModal.config({"zIndex": 9999}); // set modal z-index ( from 1 to 99999, default 9999)dsModal.beforeOpen( () => { some code } ); // use callback before modal opendsModal.afterOpen( () => { some code } ); // use callback after modal opendsModal.beforeClose( () => { some code } ); // use callback before modal closedsModal.afterClose( () => { some code } ); // use callback after modal closeLicense
MIT License
0.2.42
3 years ago
0.2.41
3 years ago
0.2.40
3 years ago
0.2.37
3 years ago
0.2.36
3 years ago
0.2.35
3 years ago
0.1.10
3 years ago
0.2.34
3 years ago
0.2.33
3 years ago
0.2.32
3 years ago
0.2.31
3 years ago
0.2.30
3 years ago
0.2.22
3 years ago
0.2.21
3 years ago
0.2.20
3 years ago
0.2.10
4 years ago
0.1.26
4 years ago
0.1.25
4 years ago
0.1.24
4 years ago
0.1.23
4 years ago
0.1.22
4 years ago
0.1.21
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
1.0.0
4 years ago