jQuery BlockUI Plugin

Overview

BlockUI - Page or element overlay

Getting Started

Download either the production version or the development version of BlockUI.

In your web page:

<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="http://path/to/your/copy/of/jquery.blockUI.js"></script>
<script>
// invoke blockUI as needed -->
$(document).on('click', '#myButton', function() {
   $.blockUI();
});
></script>

Documentation, Demos and FAQ

Everything you need to know can be found here: http://jquery.malsup.com/block/

Copyright and License

Copyright © 2007-2013 M. Alsup.

The BlockUI plugin is dual licensed under the MIT and GPL licenses.

You may use either license. The MIT license is recommended for most projects because it is simple and easy to understand and it places almost no restrictions on what you can do with the plugin.

If the GPL suits your project better you are also free to use the plugin under that license.

You do not have to do anything special to choose one license or the other and you don't have to notify anyone which license you are using. You are free to use the BlockUI plugin in commercial projects as long as the copyright header is left intact.

Comments
  • add composer component package

    add composer component package

    adds support for component and component installer for composer

    tested with composer custom repo definition in composer.json:

        "repositories": [
            {
                "type": "vcs",
                "url": "https://github.com/glensc/blockui"
            }   
        ]
        "require": {
            "components/jquery-blockui": "*@dev",
    

    after PR merge, probably should:

    1. create new git tag (f.e 2.66) in blockui and push it to github (don't forget to update versions in source)
    2. register package on packagist.org
    opened by glensc 14
  • The `jquery.blockui` package in the Bower's registry does not have a semantic version number

    The `jquery.blockui` package in the Bower's registry does not have a semantic version number

    $ bower install jquery.blockUI
    bower cloning git://github.com/malsup/blockui#~2.55.0-2013.01.23
    bower caching git://github.com/malsup/blockui#~2.55.0-2013.01.23
    bower fetching jquery.blockUI
    bower error status code of git: 128
    
    There were errors, here's a summary of them:
    - jquery.blockUI status code of git: 128
    fatal: ambiguous argument 'origin/HEAD': unknown revision or path not in the working tree.
    Use '--' to separate paths from revisions
    
    $ bower search jquery.blockUI
    Search results:
        jquery.blockUI git://github.com/malsup/blockui#~2.55.0-2013.01.23
    
    opened by cheton 7
  • BlockUI problem in FF

    BlockUI problem in FF

    Hi, I am using BlockUI for exactly what i need to do, which is to load a custom html format (including css classes including background images) message on trigger. In IE, this works perfectly but in FF, Safari and Chrome, none of the background images from the CSS display at all, so i am left with an untidy/incomplete looking loading screen. What is strange is that i have an unordered list with custom styled bullet images which are defined by the css and these display without problem in FF, Safari and Chrome. It is the div background images that do not work.

    Do you have any ideas. Other than that BlockUI is awesome.

    Thanks

    opened by dbiginton 7
  • relative position not removed on unblock

    relative position not removed on unblock

    There is fragment of code in block logic: if ($.css(this,'position') == 'static') this.style.position = 'relative';

    The problem is that after unblock it is not ralled back. So if inside div are absolute positioned element (like lightweight dialogs) they logic will be broken

    opened by yauhen 6
  • When unblocking the UI wait cursor doesn't go away on IE 10

    When unblocking the UI wait cursor doesn't go away on IE 10

    Using this code:

    $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
    

    I know there's already some code to correct this issue here: https://github.com/malsup/blockui/blob/master/jquery.blockUI.js#L118-L120

    // style to replace wait cursor before unblocking to correct issue of lingering wait cursor
    cursorReset: 'default',
    

    This doesn't act on IE 10 unfortunately.

    As always, if I move the mouse the wait cursor goes way, but this is not good from a user point of view, that is, the user has to move the mouse. The cursor should reset back to the default one automatically.

    Works great with latest Chrome 24 and Firefox 18.

    opened by leniel 5
  • BlockUI blank page with Safari 6 and OSX 10.8

    BlockUI blank page with Safari 6 and OSX 10.8

    BlockUI is working well in any Safari version when OSX is 10.7 or less, but it's failing when using it on OSX 10.8. It blocks the UI with a blank screen. Maybe it has something to do with new Notification Center feature of Mountain Lion.

    Take a look: https://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/SendingNotifications.html#//apple_ref/doc/uid/TP40001483-CH23-SW6

    opened by ghost 3
  • Pass JSHint

    Pass JSHint

    It would be cool, if blockui would pass the JSHint (with default options):

    http://www.jshint.com/
    

    Currently we get a lot of warnigs like this:

    Line 38: if (title) $m.append('<h1>'+ title+'</h1>');
        Expected '{' and instead saw '$m'.
    Line 521: if (e.keyCode && e.keyCode == 9) {
        Expected '===' and instead saw '=='.
    Line 572: setup(jQuery);
        'jQuery' is not defined.
    Line 545: function focus(back) {
        'focus' is defined but never used.
    
    opened by mar10 3
  • CSS preservation

    CSS preservation

    Hi there, I'm using this plugin and it works really nice but now I'm having problem with a legacy page when I'm reusing some templates with style from css and the content that is shown in into the modal dialog just does not preserve their styles.

    Is there something to do so the content into the modal keeps the styles?

    opened by Rafailong 3
  • cursor doesn't change back to the default in IE until the cursor moves

    cursor doesn't change back to the default in IE until the cursor moves

    I've noticed that the cursor changes to the wait cursor by default on block but in Internet Explorer when the screen is unblocked the cursor doesn't change back right away. The user has to move the mouse for the cursor to change. It works fine in all other browsers. Any way to work around this?

    opened by tinyfly 3
  • Mouse normal

    Mouse normal

    Hi

    I use blockUi to display informations without processing something.

    Is it possible to not change mouse icon to wait ? I need normal arrow. I try to use mouse : null or erase this line but nothing change.

    Is it possible ?

    Thank

    opened by Hydro8 2
  • blockui-2.70 - Element blocking does not work on Chrome or IE11

    blockui-2.70 - Element blocking does not work on Chrome or IE11

    The example on this page where you click on the link doesn't block in Chrome (Version 52.0.2743.82 m) or IE11...

    http://jquery.malsup.com/block/#element

    It works as expected in Firefox 48.0

    opened by wkrick 2
  • Can't download production version

    Can't download production version

    Hi, I would like to download the production version of blockui, but the link doesn't work. is http://malsup.github.io/min/jquery.blockUI.min.js the correct one that can download the minified version? Thanks a lot.

    opened by linlinmq 1
  • Safari problems

    Safari problems

    Hi. I tried the demo page https://jquery.malsup.com/block/ but it neither works in a current Safari nor Chrome.

    My personal installation however does work with Chrome, but still Safari makes problems.

    This code does show a spinner whenever a link or submit button is pressed. When the target page is loaded, the ui disappears. It works fine in Chrome. But Safari does not show it.

    $(document).on('click',
        'a[href*="/"][target!="_blank"]:not(.suppress-block-ui), button[type=submit]:not(.suppress-block-ui)',
        function (e) {
           // e.preventDefault() // **
            if(! e.ctrlKey && !e.metaKey )
                myBlockUi();
        });
    

    If I try to prevent the navigation (**), the ui does appear on Safari as well.

    opened by flaushi 0
  • Listen events 'block' and 'unblock'

    Listen events 'block' and 'unblock'

    Hello, there are a possibility to execute something like:

    
    $('.selector').on('block', function(){
       console.log('the element has been blocked');
    });
    
    $('.selector').on('unblock', function(){
       console.log('the element has been unblocked');
    });
    
    $('.selector').block();
    $('.selector').unblock();
    
    

    Thank you!

    opened by lwxbr 0
  • Update the blocked message without re-blocking?

    Update the blocked message without re-blocking?

    Is there a way to update the message in the $.blockUI without calling another $.blockUI? The behavior of calling another blockUI to update the block message momentarily removes the existing block to put the new block up. This is not ideal as we want to keep the screen locked during a process and only want to update the message, but currently the screen unlocks for a split second to change the block message when calling blockUI again to update the block message.

    opened by levinium 0
jQuery quick notification plugin. jQuery плагин быстрых уведомлений

Note: English translation by Google Translate Notific About Description: this is a jQuery plugin that helps you display notifications on your site. Li

Webarion 2 Nov 7, 2021
A variety of jQuery plugin patterns for jump starting your plugin development

jQuery Plugin Patterns So, you've tried out jQuery Boilerplate or written a few of your own plugins before. They work to a degree and are readable, bu

jQuery Boilerplate 1.6k Dec 31, 2022
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Rajan Karmaker 1 Aug 22, 2022
Jquery-actualizer - jQuery ajax actualizer

jQuery AJAX Actualizer Include jQuery & this plugin into your HTML file and use this js code: $('#target').actualizer('a'); On click at any A element,

Šimon (Simon) Rataj 1 Jul 28, 2020
jquery-input-mask-phone-number.js - A simple, easy jquery format phone number mask library

jquery-input-mask-phone-number A jQuery Plugin to make masks on input field to US phone format. Quick start 1. Add latest jQuery and jquery-input-mask

Raja Rama Mohan Thavalam 12 Aug 25, 2022
jQuery Star Rating Plugin

#jQuery Star Rating ##Overview The Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control

Fyneworks 26 Nov 28, 2022
jQuery plugin to encourage strong user passwords

Naked Password¶ ↑ Simple jQuery plugin to improve security on passwords. Usage¶ ↑ Naked password is extremely easy to use. All thats needed is for you

Platform45 307 Nov 3, 2022
A jQuery plugin for doing client-side translations in javascript.

About jQuery-i18n is a jQuery plugin for doing client-side translations in javascript. It is based heavily on javascript i18n that almost doesn't suck

Dave Perrett 202 May 19, 2021
jQuery Split Pane plugin

split-pane jQuery Split Pane plugin The plugin should work in IE8 and above as well as in Chrome, Safari and Firefox. You can download split-pane.js a

Simon Hagström 162 Dec 13, 2022
A jQuery plugin for creating exceptional footnotes.

bigfoot.js by Chris Sauve Bigfoot is a jQuery plugin that creates exceptional footnotes. Simply include the code on your pages and footnotes will be d

Chris Sauve 929 Nov 21, 2022
jQuery tabs plugin

English description | Описание на русском jQuery tabs plugin. Easy and well done tabs with many options and skin support Version: 1.0.2 Project page a

Denis Ineshin 83 Nov 27, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Samson Onna 600 Dec 8, 2022
jQuery plugin for color manipulation and animation support.

jQuery Color Supported jQuery versions: 1.8+ Browser Support jQuery Color 3.x supports the following browsers: Desktop: Chrome: (Current - 1) and Curr

jQuery 1.6k Dec 5, 2022
The jQuery Plugin for Big Background Video (and Images)

BigVideo.js ####The jQuery Plugin for Big Background Video (and Images) Learn how to use this plugin on its demo page. 12-30-2015 Update This project

John Polacek 2.3k Jan 9, 2023
jQuery tags input plugin based on Twitter Bootstrap.

Bootstrap Tags Input Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Current stable version: v

null 26 Dec 21, 2022
A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes!

(jQuery) Uniform A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes! Works well with jQuery 1.6+, but we

Audith Softworks 2.2k Jan 2, 2023
jQuery plugin to add 360 rotatable bubble style tooltips

Sorry, this project is no longer maintained. grumble.js Add a bubble to any element; configure its rotation on a 360 degree axis and define its distan

James Cryer 777 Nov 9, 2022
A tiny, plugin extendable JavaScript utility library with a JQuery-like syntax.

Tiny Friggin' Utility Zapper What is it? A tiny ~7kb extendable JavaScript utility library with a JQuery like syntax for getting work done fast! If yo

Bret 4 Jun 25, 2022