Simple Lightweight Modal Plugin with jQuery and Bootstrap - uiblock

uiblock is a simple lightweight yet heavily customizable jQuery lightbox plugin used to display a modal window via Bootstrap panels component.

How to use it:

1. Load the required Twitter Bootstrap's stylesheet in the head section of the web page.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

2. If you're running the uiblock.js in "auto mode", you just need to add the class .ui-block and some extra options, listed below as a data-* attribute.

<a class="ui-block" 
   data-ui-block-content="#test_content" 
   data-ui-block-close-button="yes" 
   data-ui-block-close-overlay="yes" 
   data-ui-block-disable-esc="no" 
   href="#" role="button">
   Click to open a modal window!
</a>

3. Embed the content into the modal window using the Html structure of Bootstrap's panels component.

<div id="test_content" style="display: none;">
  <div class="panel panel-default">
    <div class="panel-heading">uiblock.js example</div>
    <div class="panel-body">
      Modal content goes here
      <p style="margin-bottom: 0;"><a href="#" class="btn btn-default ui-block-close">Close</a></p>
    </div>
  </div>
</div>

4. Load the jQuery Javascript library and the jQuery uiblock plugin at the end of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="uiblock.js"></script>

5. Enable the plugin in auto mode. That's it.

uiblock.fn.auto();

6. If you need to start the plugin manually, here's the complete function

myManualFunction = function (){

  uiblock.fn.init({

    // Your content element
    container: '#test_content',

    // Your content settings
    content: {
      
      //Displays close button
      closeButton: false,

      // Apply any CSS styles in JS to the container below here (object)
      css:{}

    },

    // uiblock.js overlay settings
    overlay: {

      // Allow user to click on overlay and close it
      canClose: false,

      // Prevent user to close uiblock.js by pressing ESC
      disableEsc: false,

      // Apply any CSS styles in JS to the overlay right here (object)
      css:{}
    },

    // You may add some callback functions too...
    events: {

      // When uiblock.js is loaded
      onLoad: function () {
        console.log('uiblock.js was opened.');
      },

      // When uiblock.js is closed
      onClose: function () {
        console.log('uiblock.js was closed.');
      }

    },

    // You can specify your own classes for the block container or the close button (optional)
    classes: {
      open: ".ui-block",
      close: ".ui-block-close"
    }

  });
}

Change logs:

2015-02-10:

• Attempt to fix Mobile Safari issues

2014-12-24:

• Attempt to fix Mobile Safari issues

2014-12-20:

•  Positioning fix for Mobile Safari

 

---

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