https://github.com/ehanlin/tinymodal
https://github.com/ehanlin/tinymodal
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ehanlin/tinymodal
- Owner: eHanlin
- License: mit
- Created: 2014-11-12T04:19:23.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-06-12T08:17:03.000Z (about 11 years ago)
- Last Synced: 2024-12-28T19:03:35.805Z (over 1 year ago)
- Language: HTML
- Size: 133 KB
- Stars: 0
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#
這邊只是將tiny modal 放置 npm 使用
#author
elclanrs
#link
https://github.com/elclanrs/jquery.tiny.modal
# jQuery Tiny Modal
Barebones modal dialogs.
**Demo:** [http://jsbin.com/UlusaXI/2](http://jsbin.com/UlusaXI/2)
## How to
Create a container with an ID for your modal dialog, then put any markup you want inside.
```html
My Modal
Lorem ipsum dolor sit amet consectetur
```
Make sure to hide the modal in your CSS:
```css
#mymodal { display: none }
```
Trigger your modal on some element, like a button for example and call the plugin:
```javascript
$('button').click(function(){
$.tinyModal({
title: 'My Modal',
html: '#mymodal'
});
});
```
Tiny Modal comes with a basic theme that you can configure in `styl/jquery.tinymodal.styl`. Make sure to run `npm install` to download the dependencies. After editing don't forget to watch your files for changes and compile with `sh compile.sh`.
## Options
```javascript
_defaults = {
buttons: ['Ok','Cancel'],
title: 'Alert',
html: '
Alert
', // markup or selector
Ok: $.noop, // callback for the "Ok" button
Cancel: $.noop, // callback for the "Cancel" button
onClose: $.noop, // callback after the dialog closes
clickOutside: true // close the dialog when clicking outside
};
```