1

I have a project where I wish to open up a form at a specific location relative to other page elements. I'd also like to block the non-form page items while the form is open. I've played around with blockUI, but it appears that I can only position the non-blocked DIV relative to the browser window. That's great for modals, but not great for my situation.

Let me see if I can clarify with an example. Let's say I have some code like:

<div style="position:relative; height:400px; width:600px;">
  <p>This content should be blocked, as well as anything not in the next div</p>
  <div id="non-blocked-content" style="position:absolute; top:40px; left: 200px; width:300px; height:200px;">
    <form>
       <label>This should not be blocked</label>
       <input type="text" name="name">          
    </form>
  </div>
</div>

I'd like the form to appear and be useable, but the rest of the page content should be blocked. Does anyone know of a javascript (preferably jQuery) package to pull this off?

Thanks! - Bret

clone45
  • 8,952
  • 6
  • 35
  • 43

4 Answers4

1

Create a div with the size to match the screen, position it absolutely, give it a z-index of 998 or something, then give the item you want unblocked z-index of 999.

simple jsfiddle example

Paul Creasey
  • 28,321
  • 10
  • 54
  • 90
0

Why not use blockUI and position the intended form in respect to the elements you want? With jQuery you can easily get the position of all elements in relativity to the document.

Korvin Szanto
  • 4,531
  • 4
  • 19
  • 49
  • I did try this, but one issue that I had was when the user scrolled with window after I positioned the blockUI modal, the modal would stay positioned relative to the browser window. I didn't feel like writing a bunch of javascript that re-positions the model when the window is scrolled. It felt like there must be a more graceful solution. – clone45 Sep 24 '11 at 01:11
0

For a solution to your problem: Take a look here: disable all page elements with modal feature using jquery

Remember though that modal behavior for only specific parts of a form can be pretty disorientating for users, which is why modal behavior is usually through a dialog displayed on top of everything else.

I have personally used blockUI with good effect. It works as advertised. :-)

Community
  • 1
  • 1
Karlth
  • 3,267
  • 2
  • 27
  • 28
0

I liked the solutions offered, but none were quite right. Paul's code set the element's width and height to the window's width and height. If you have a large page and you're scrolled down a ways, the blocked portion of the screen won't cover the area that you're viewing.

The code that I used looks like this:

$('<div/>').css({
    'width':$('body').width(),
    'height' :$('body').height()
}).appendTo('body').attr('id', 'overlay');

.. and overlay is styled like...

#overlay {
  position:absolute;
  top:0;
  left:0;
  z-index:998;
  background:url('/images/global/pixel-black-opacity-70-percent.png');
}
clone45
  • 8,952
  • 6
  • 35
  • 43