https://github.com/bluzky/timodal
A simple, lightweight and pure javascript modal plugin
https://github.com/bluzky/timodal
javascript lightweight modal modal-dialogs pure-javascript
Last synced: 9 months ago
JSON representation
A simple, lightweight and pure javascript modal plugin
- Host: GitHub
- URL: https://github.com/bluzky/timodal
- Owner: bluzky
- Created: 2015-12-22T13:52:36.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-15T15:39:35.000Z (about 8 years ago)
- Last Synced: 2025-04-09T05:51:07.947Z (10 months ago)
- Topics: javascript, lightweight, modal, modal-dialogs, pure-javascript
- Language: JavaScript
- Homepage:
- Size: 5.66 MB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TiModal
TiModal is a
### - lightweight
### - pure javascript
library to create modal dialog.
It's simple, flexible and easy to customize. You can change source code if you want.
## **[Demo](https://bluzky.github.io/projects/timodal/example.html)**
## **[Download](https://github.com/bluzky/TiModal/releases/tag/v2.1)**
## How to use TiModal
### 1. CSS.
#### Add following CSS rules to your css stylesheet before using TiModal
```css
/* REQUIRED CSS */
.tioverlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
display: none;
text-align: center;
overflow-y: auto;
}
/* CUSTOM CSS*/
.popup-wrapper {
margin: 20px auto;
display: inline-block;
background: #fff;
border-radius: 3px;
padding: 30px;
text-align: left;
}
.popup-content-wrapper .close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
z-index: 20;
padding: 0;
}
```
### 2. Basic usage
#### **Html code**
```html
Default modal
<div class="popup-wrapper">
Hello my friend!
<br/>
This is a default modal
<br/>
<b>Click on overlay to hide me.</b>
</div>
```
#### Bind button clicked event with a function to show modal
**Pure Javascript**
```javascript
var button = document.querySelector('#show-default-modal');
button.addEventListener('click', function(){
var html = document.getElementById("default-modal").innerHTML;
var modal = tiModal.create(html)
.show();
});
```
**Using jquery**
```js
$('#show-default-modal').click(function(){
var html = $('#default-modal').html();
tiModal.create(html).show();
});
```
### 3. Binding event using code
#### **Html code**
```html
Confirm modal
<div class="popup-wrapper">
<div class="popup-header"> Warning </div>
<div class="popup-content">
This action cannot be reverted.
Do you want to proceed?
</div>
<div class="popup-footer">
<button class="btn-success cancel">Bring me back</button>
<button class="btn-danger ok">Do it!</button>
</div>
</div>
```
#### **Javascript**
```javascript
$('#show-confirm-modal').click(function(){
var html = $('#confirm-modal').html();
tiModal.create(html, {
events: {
'click .cancel': function(e){
this.close();
},
'click .ok': function(e){
this.close();
alert('User has been deleted!')
}
}
}).show();
});
```
### 4. API
#### 4.1 Public methods
- Create modal
`TiModal.create(html, options)`
**Params**
- `html`: html template for modal
- `options`: see below
**Return** Modal object
- Hide current modal
`TiModal.closeCurrent()`
- Hide all modal
`TiModal.closeAll()`
#### 4.2 Modal object methods
- `.show()` : show dialog
- `.hide()` : hide dialog
- `.dispose()` : destroy dialog and remove from the memory
### 5. All possible options
```javascript
modal: false | true,
```
| **option** | **type** | **default** | **description** |
| ---------- | -------- | ----------- | ---------------------------------------- |
| `modal` | boolean | false | `false`: close modal when click on the overlay `true`: only close modal when call close modal API |