Simple Clean jQuery Scrollable Modal Dialog Plugin - Tiny Modal

Tiny Modal is a lightweight and easy to implement jQuery plugin that has the ability to show up a modal window with a scrollbar for long popup content.

Basic Usage:

1. Include the jQuery tiny modal plugin's stylesheet in the header.

<link rel="stylesheet" href="jquery.tinymodal.css">

2. Include the jQuery library and jQuery tiny modal plugin's javascript in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.tinymodal.js"></script> 

3. Create an element to trigger a modal dialog.

<button type="button">Open</button>

4. Call the plugin on the trigger element and set the title/body content for your modal dialog.

<script>
$('button').click(function(){
$.tinyModal({
title: 'Hello World!',
html: '#mymodal' // jQuery selectior for modal content
});
});
</script>

5. Call the plugin on the trigger element and set the title/body content for your modal dialog.

<script>
$('button').click(function(){
$.tinyModal({
title: 'Hello World!',
html: '#mymodal' // jQuery selectior for modal content
});
});
</script>

6. Wrap the modal content in an DIV element with the ID '#mymodal'.

<div id="mymodal">
<div class="modal">
Your content goes here
</div>
</div>

7. Defaults.

<script>
$('button').click(function(){
$.tinyModal({
buttons: ['Ok','Cancel'],
title: 'Alert',
html: '<p>Alert</p>', // // 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
});
});
</script>

---

This awesome jQuery plugin is developed by elclanrs. For more Advanced Usages, please check the demo page or visit the official website.