Tiny Draggable Dialog & Modal Plugin - simple-dialog
File Size: | 16.8 KB |
---|---|
Views Total: | 1269 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple and lightweight jQuery plugin to create customizable, draggable dialog popups for alerts, confirm dialogs, and modal windows.
How to use it:
1. Load the jquery-simple-dialog.js
JavaScript library after jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/jquery-simple-dialog.js"></script>
2. Create a basic dialog and a trigger button on the page.
<div id="example" class="dialog"> <div id="example_title">Dialog Title</div> <p>Dialog Content</p> <hr> <button type="button" id="example_ok">OK</button> <button type="button" id="example_cancel">Cancel</button> </div>
3. Hide the dialog on page load and apply additional styles as follows:
.dialog { display: none; /* optional CSS styles */ width: 400px; padding: 10px; }
4. Initialize the dialog.
$('#example').simpleDialog({ opener: '#example_opener', closer: '#example_ok, #example_cancel' });
5. Automatically set the focus on a specific element within the dialog.
$('#example').simpleDialog({ opener: '#example_opener', closer: '#example_ok, #example_cancel', focus: '#basic_ok' });
6. Enable the draggable functionality on the dialog.
$('#example').simpleDialog({ opener: '#example_opener', closer: '#example_ok, #example_cancel', dragger: '#example_title' });
7. Enable the modal mode.
$('#example').simpleDialog({ opener: '#example_opener', closer: '#example_ok, #example_cancel', modal: true });
8. Available event handlers.
$('#example').simpleDialog({ opener: '#example_opener', closer: '#example_ok, #example_cancel' }).on('dialog:open', function(e, $elem) { console.log('opened by ' + $elem.attr('id')); }).on('dialog:close', function(e, $elem) { console.log('closed by ' + $elem.attr('id')); });
Changelog:
v0.1.2 (05/17/2021)
- Don't cache parent and modal element.
This awesome jQuery plugin is developed by kanety. For more Advanced Usages, please check the demo page or visit the official website.