This time I will share jQuery Plugin and tutorial about Multifunctional Dialog Popup Plugin With jQuery – Dialog.js, hope it will help you in programming stack.
| File Size: | 8.53 KB |
|---|---|
| Views Total: | 1385 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Dialog.js is a simple, versatile jQuery popup plugin which lets you create various types of dialog boxes (e.g. alert, confirm, notify) with custom styles and callback functions.
How to use it:
1. Put jQuery library and the jQuery Dialog.js plugin’s files in your html document.
1 |
<link rel="stylesheet" href="dialog.css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="dialog.js"></script> |
2. Display a basic dialog box on the screen.
1 |
<div id="a" style="display: none;"> |
2 |
<p>Dialog Content Here</p> |
3 |
</div> |
1 |
$('#a').dialog({ |
2 |
title:'Dialog Title' |
3 |
}) |
3. Or define the dialog content directly in the JavaScript.
1 |
$.dialog({ |
2 |
content:'<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Content Here' |
3 |
}) |
4. All default options for the dialog method.
01 |
$.dialog({ |
02 |
03 |
// default settings |
04 |
width: '400px', |
05 |
height: '200px', |
06 |
title: '', |
07 |
content: '', |
08 |
hideTime: 0, |
09 |
showClose: true, |
10 |
11 |
// callback functions |
12 |
open: null, |
13 |
close: null, |
14 |
enterBtn: null, |
15 |
cancelBtn: null |
16 |
|
17 |
}) |
5. Create toast style notification popups as follow:
1 |
$.tooltip({ |
2 |
icon:'success', |
3 |
content:'Success!', |
4 |
fontColor:'green' |
5 |
}) |
6. All default options for the tooltip method.
01 |
$.tooltip({ |
02 |
03 |
// 'success', 'error', 'info' and 'help' |
04 |
icon:null, |
05 |
06 |
// text color |
07 |
fontColor:'black', |
08 |
09 |
// timeout |
10 |
hideTime: 1000 |
11 |
|
12 |
}) |
Change log:
2017-01-17
- Updated styles.
This awesome jQuery plugin is developed by hyhkjiy. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
