jQuery Plugin For Scrollable Modal Dialog - Long Dialog

Long Dialog is a super-light jQuery modal plugin designed for long content popup dialog.

How to use it:

1. Import the latest jQuery javascript library and jQuery long dialog's script in the page.

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

2. Create a link to toggle the modal dialog.

<div class="main">
<a href="#" class="open-dialog">Open dialog</a>
</div>

3. Create the html for the modal dialog.

<div class="overlay">
<div class="dialog">
...
</div>
</div>

4. The sample CSS to style the modal dialog.

.overlay {
background: rgba(0, 0, 0, .5);
bottom: 0;
box-sizing: border-box;
display: none;
height: 100%;
left: 0;
outline: none;
overflow: auto;
position: absolute;
right: 0;
top: 0;
}
.dialog {
background: #fff;
margin: 20px auto;
padding: 20px;
position: relative;
width: 640px;
}

4. Initialize the plugin

<script>
jQuery(function ($) {
$(".overlay").longDialog({
openButton: $(".open-dialog"),
mainContainer: $(".main")
});
});
</script>

Change log:

2014-03-27

• Added ESC to close

---

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