Minimal Clean Dialog & Modal Plugin With jQuery - DPopbox

DPopbox is a minimal, flexible jQuery popup plugin used to create dialog boxes & modal windows from inline content within the document.

Key Features:

• 5 animation types: 'fade', 'slide', 'grow', 'bringup', 'bringdown'.
• 2 built-in themes: 'light' and 'dark'.
• Configurable background overlay.

Basic usage:

1. To get started, you have to include jQuery library together with the jQuery DPopbox plugin's JS & CSS files on the html page.

<link href="popbox.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="popbox-1.1.js"></script>

2. Create a trigger button to toggle the popup.

<button id="Popup-Trigger">Trigger Button</button>

3. Add you content to the popup and specify the trigger selector using the data-trigger attribute:

<div id="Popup-Demo" data-trigger="#Popup-Trigger">
  Popup Content Here
</div>

4. If you want to apply a lightbox effect to a specific image:

<img id="opup-Demo" src="image.jpg" width="600" height="450" data-trigger="#Popup-Trigger">

5. Show the popup once you click on the trigger button.

$('#Popup-Demo').popbox();

6. Show/hide the popup manually.

$('#Popup-Demo').popbox('show');
$('#Popup-Demo').popbox('hide');

7. All default popup options.

$('#Popup-Demo').popbox({

  // 'fade' | 'slide' | 'grow' | 'bringup' | 'bringdown'
  animation:    'fade',

  // animation speed in milliseconds
  animationSpeed: 380,

  // displays the background overlay
  overlay:    true,

  // closes the popup when click on the overlay
  overlayClose:   false,

  // displays the close button
  close:      true,

  // or 'dark'
  theme:      'white''

});

---

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