jQueryUI or BlockUI modal dialog over PART of a page

Question

I want to have a modal dialog over part of a web page, just a div container. I know a bespoke solution is likely the answer but I'm wondering if BlockUI can apply it's modal overlay to a specific div only.

Google/stackoverflow has bared no fruit when asking if this is possible with jQueryUI or BlockUI.

Is modifying an existing overlay solution the only answer?

Answer 1

You can create a div with the particular dimensions and position, and then block that.

JS

$('body').append('<div id="blocker"></div>');
$('#blocker').block({message: null});

CSS

#blocker {
    position: absolute;
    top: 50px;
    left: 100px;
    height: 75px;
    width: 150px;
}

Demo →