jQuery Plugins › jQuery Other Plugins › jQuery flexModal

Tiny Flexible Modal & Dialog Plugin With jQuery - flexModal

File Size: 9.4 KB
Views Total: 4735
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#alert#confirm#Dialog#Modal
Tiny Flexible Modal & Dialog Plugin With jQuery - flexModal

flexModal is an alternative to the jQuery tinyLayer plugin that helps you create flexible, customizable, AJAX-enabled and clean looking modal windows for alerts, notifications, dialog boxes and many more.

Basic usage:

1. Include the stylesheet jquery.flex-modal.css in the <head> section of the document, and the JavsScript file jquery.flex-modal.js after loading jQuery as follows.

<link rel="stylesheet" href="jquery.flex-modal.css">
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.flex-modal.js"></script>

2. Create a simple modal dialog.

<button type="button" data-modal-target="#modal-1">Lanuch</button>

<div id="modal-1" class="modal-1 flex-modal-hide">
  <h3>Simple</h3>
  <p>Just a text to display</p>
</div>

3. Create a confirmation dialog which is not closeable via close button, overlay or ESC key.

<button type="button" data-modal-target="#modal-2">Lanuch</button>

<div id="modal-2" class="modal-2 flex-modal-hide" 
     data-close-on-overlay-click="false" 
     data-close-on-esc-key="false" 
     data-close-btn-markup="false">
  <h3>Confirmation</h3>
  <ul>
      <li>Notification is not closeable via close btn, overlay or esc key</li>
  </ul>
  <button type="button">Confirm</button>
</div>

4. Create an ajax modal which loads data from an external url.

<button type="button" data-modal-target="#modal-3">Lanuch</button>

<div id="modal-3" class="modal-3 flex-modal-hide">
  <h3>Ajax</h3>
</div>

$('#modal-3').data({
  onCreate: function( api ) {
    var $modalContent = $(this).children();

    $.ajax({
      url: 'ajax.html',
      cache: false,
      success: function( data ) {
          $modalContent.append(data);
      }
    });
  }
});

5. You can add custom animations to the modals in pure CSS and/or JavaScript if you want.

.modal-3 { transition: opacity .4s; }

.modal-3 .flex-modal-item__content {
  transition: transform .4s;
  transform: translateY(100px);
}

.modal-3.flex-modal-item--visible .flex-modal-item__content { transform: translateY(0); }

6. Possible plugin options with default options. The options as shown below also can be passed in via data attributes as you seen in example 2.

// custom markup for close button
closeBtnMarkup: '<button class="flex-modal-item__close" type="button">x</button>',

// ayuto close other opened modals
autoCloseOthers: true,

// close the modal by click on the background overlay
closeOnOverlayClick: true,

// close the modal by press on ESC key
closeOnEscKey: true,

// callbacks
onCreate: function() {},
onOpen: function() {},
onClose: function() {}

7. The API methods to close & open modal windows manually.

// close a specified modal window
myModal.close('#modal-1');

// open a specified modal window
myModal.open('#modal-1');

Change log:

2017-04-23

  • Update jquery.flex-modal.js

2016-12-29

  • animations fixed
  • 2 more events added: afterClose and -Open

About Author:

Author: Florian Capelle

Website: https://github.com/floriancapelle/jquery-flex-modal

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