Multifunctional Modal Dialog Plugin with jQuery - spModal

spModal is a simple yet multipurpose jQuery modal plugin which helps you create draggable loading modal dialogs, message dialog boxes and modal windows with ease.

More example:

• Loading Modal Dialog
• Modal Window

How to use it:

1. Include the needed jQuery & jQuery UI libraries on the html page.

<link rel="stylesheet" href="jquery-ui-1.11.4.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui-1.11.4.min.js"></script>

2. Include the jQuery spModal plugin's JS and CSS files after jQuery library.

<link rel="stylesheet" href="jquery.sp-modal.min.css">
<script src="jquery.sp-modal.min.js"></script>

3. Create a loading modal with a fullscreen overlay to indicate the ajax loading status.

$(function () {
  var loading = $.spModal('loading');
  loading.addButton('Cancel', function () {
    loading.close();
  });
});

4. Create a message dialog box with action buttons.

$(function () {
  var msg = $.spModal('message', 'Dialog Title', 'Dialog message ... ');
  
  // adds 'Accept' button
  var acceptBtn = msg.addButton('Accept');
  acceptBtn.on('click', function () {
    msg.close();
  });
  
  // adds 'Cancel' button
  var cancelBtn = msg.addButton('Cancel');
  cancelBtn.on('click', function () {
    msg.close();
  });
});

5. Create a modal window with action buttons that loads content from an external source.

$(function () {
  var mw = $.spModal(
      'window',
      'external.html',
      {
          title: 'Modal Title',
          message: 'Modal Message ... '
      }
  );
  
  mw.on('action-1', function () {
      mw.close();
  });
  
  mw.on('action-2', function () {
      mw.close();
  });
  
  mw.on('action-3', function () {
      mw.close();
  });
  
});

Change logs:

2015-12-06

• remove unused param

2015-05-14

• beautify error message

2015-05-11

• accept css paths as paremeter

---

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