Modals - Magnific Popup

Plugin Information

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for the user on any device.

Plugin Name: Magnific Popup
Author: Dmitry Semenov
License: MIT licensed
Website: http://dimsemenov.com/
Git Branch: dimsemenov/Magnific/
Dependencies:
<link href="vendor/plugins/magnific/magnific-popup.css" rel="stylesheet" type="text/css" >
<script src="vendor/plugins/magnific/jquery.magnific-popup.js"></script>

Initializing a popup

Popup initialization code should be executed after document ready, for example:

Copy 

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

Method 1: From an HTML element

The simplest way to initilize a Magnific Popup

Open popup
Copy 

<a class="magnific-link btn btn-primary" href="path-to-image.jpg">Open popup</a>
Copy 

$('.magnific-link').magnificPopup({ 
  type: 'image'
  // other options
  // gallery:{enabled:true}
});

Method 2: From a group of elements

Note: This method does not enable gallery mode, each item will be opened as a single popup

Open popup 1 Open popup 2 Open popup 3
Copy 

<div class="magnific-container">
  <a class="btn btn-primary" href="assets/img/stock/1.jpg">Open popup 1</a>
  <a class="btn btn-primary" href="assets/img/stock/2.jpg">Open popup 2</a>
  <a class="btn btn-primary" href="assets/img/stock/3.jpg">Open popup 3</a>
</div>
Copy 

$('.magnific-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

Method 3: From a group of Thumbnails

Note: This method does not enable gallery mode, each item will be opened as a single popup

Copy 

<div class="magnific-gallery">
  <a href="../../assets/img/stock/1.jpg" title=""><img src="../../assets/img/stock/1.jpg" width="131" height="87"></a>
  <a href="../../assets/img/stock/2.jpg" title=""><img src="../../assets/img/stock/2.jpg" width="131" height="87"></a>
  <a href="../../assets/img/stock/3.jpg" title=""><img src="../../assets/img/stock/3.jpg" width="131" height="87"></a>
</div>
Copy 

$('.magnific-gallery').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery:{enabled:true}
});

Method 4: From the ‘items’ option

The items option defines data for the popup item(s) and makes Magnific Popup ignore all attributes on the target DOM element. The value for items can be a single object or an array of objects.

Copy
Copy 

// Example with single object
$('.magnific-item').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});

Method 5: Ajax Loading option

To create such type of popup, first of define the path to the file that you wish to display and select ajax type of the popup.

Show Ajax Popup
Copy
Copy 

// Example with single object
$('.magnific-item').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});

With Animation

We can add a custom animation to the modal popup by modifying how a modal is created. Several modifications are required to a popups HTML and Javascript initilization.

Copy
Copy 

$('.magnific-animate').magnificPopup({ 
    items: { // Set item source
      src: '../../assets/img/stock/1.jpg'
    },
    type: 'image', // set source type (image default)
    removalDelay: 500, // delay removal by X to allow out-animation,
    callbacks: {
      beforeOpen: function(e) {
          // Set Magnific Animation
          var Animation = "mfp-rotateUp";
          this.st.mainClass = Animation;

          // Inform content container there is an animation
          this.contentContainer.addClass('mfp-with-anim');
      },
    }
});

// Animations classes available:
// mfp-flipInY, mfp-flipInX
// mfp-zoomIn, mfp-zoomOut
// mfp-rotateUp, mfp-rotateDown, mfp-rotateLeft, mfp-rotateRight
// mfp-slideUp, mfp-slideDown, mfp-slideLeft, mfp-slideRight
// mfp-sign, mfp-newspaper
// mfp-fullscale, mfp-with-fade

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://dimsemenov.com/docs
Advanced Examples: http://codepen.io/collection/nLcqo/

Modals - Bootbox

Plugin Information

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals

Plugin Name: Bootbox
Author: Nick Payne
License: MIT licensed
Website: http://bootboxjs.com/
Git Branch: makeusabrew/bootbox
Dependencies:
None Required
Considered Core - <script src="assets/js/utility/utility.js"></script>

BootBox Alert Dialog

The simplest way to initilize a Bootstrap dialog Popup

Copy 

<button id="some-button" class="btn btn-primary">Open popup</button>
Copy 

$('#some-button').on('click',function() {
    bootbox.alert("Hello world!", function() {
      // do something
    });
});

BootBox Confirm Dialog

Copy 

<button id="some-button" class="btn btn-primary">Open popup</button>
Copy 

$('#some-button').on('click',function() {
    bootbox.confirm("Are you sure?", function() {
      // do something
    });
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://bootboxjs.com/documentation.html
More Examples: http://bootboxjs.com/

Modals - PNotify

Plugin Information

JavaScript notifications for Bootstrap, jQuery UI, and the Web Notifications Draft.

Plugin Name: PNotify
Author: Sciactive
License: MIT licensed
Website: http://sciactive.github.io/pnotify/
Git Branch: sciactive/pnotify
Dependencies:
None Required
<script src="vendor/plugins/pnotify/pnotify.custom.js"></script>

Basic Example

The simplest way to initilize a PNotify dialog

Copy 

<button id="pnotify-demo" class="btn btn-primary">Example</button>
Copy 

$('#pnotify-demo').on('click',function() {
    bootbox.alert("Hello world!", function() {
      // do something
    });
});

Contextual Example

Copy 

<button id="pnotify-demo" class="btn btn-primary">Example</button>
Copy 

$('#pnotify-demo').on('click', function() {
    new PNotify({
        title: 'Regular Notice',
        text: 'Check me out! I\'m a notice.',
        type: 'info' // all contextuals available(info,system,warning,etc)
    });
});

Positioning "Stack" Example

Copy 

<button id="pnotify-demo" class="btn btn-primary">Example</button>
Copy 

$('#pnotify-demo').on('click', function() {
    var myStack = {"dir1":"down", "dir2":"right", "push":"top"}; // define new stack properties
    new PNotify({
        title: "Over Here",
        text: "Check me out. I'm in a different stack.",
        addclass: "stack-custom",
        stack: myStack
    })
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://sciactive.com/pnotify/
More Examples: http://sciactive.com/pnotify/#demos-simple
Return to Top