Simple Lightweight Modal Plugin with jQuery and Bootstrap - uiblock

File Size: 7.13 KB
Views Total: 3702
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//">

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" 
   href="#" role="button">
   Click to open a modal window!

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>

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

<script src="//"></script>
<script src="uiblock.js"></script>

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

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

myManualFunction = function (){


    // 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)


    // 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)

    // 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:


  • Attempt to fix Mobile Safari issues


  • Attempt to fix Mobile Safari issues


  •  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.