Question

We have a requirement for a modal dialog that makes the page modal except for the header area of the page, kind of like two separate areas. The header elements are still active, when they are clicked or invoked the dialog disappears and the header element that is invoked works as normal. Is this possible with jquery dialog, or another library?

Answer 1

This is a good use case for the jQuery BlockUI Plugin. If you have everything on your page with the exception of the header in a container you can use it with the plugin’s element blocking to prevent users from interacting with the page.

The code would look something like this.

HTML:

<header></header>
<div id="everything-else">
    <!-- everything -->
</div>

JS:

$(function() {
    $('#everything-else').block();
});