Menu
Is there any way to create a modal 'scope' for jQuery dialogs? As a somewhat contrived example, I've got a page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Console</title>
<link href="console.css" rel="stylesheet" type="text/css" />
<link href="libs/jquery-ui/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="libs/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="libs/jquery-ui/jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div id="toolbar"></div>
<div id="mainContent"></div>
<div id="footer"></div>
</body>
</html>
I want to create some modal dialogs for the mainContent area. When the dialog is open, I want to not allow interaction with the mainContent area, but still allow interaction with the toolbar and footer.
Or if a page has multiple mainContent-like divs, each one has there own independent set of modal dialogs that still allow interaction with the other divs.
I know how to create modal dialogs with the jQuery UI library; my question is specifically about applying modality to a section of the page rather than the entire page, either using this library, or in a way that easily complements this library.
733
Simple solution would be to have a hidden div that would act as an overlay. It would always have the same dimensions and positioning as your "mainContent" div. Then show that div over the top of your content by using the z-index. Then place your modal on top of the overlay.
Net effect, everything will be covered in main content area by the overlay but your modal will rest on top of the overlay and thus the user can only interact with it.
Edits:
Z-index management: I would just set the overlay z-index to a high base number to avoid conflicts with other z-indices. Then whenever showing the modal, just have jquery selectors that look for shown overlays and increment the modal z-index by one of that number.
.Overlay
{
z-index: 200;
}
.Modal
{
//...
}
function ShowModal(modalId)
{
var maxZIndex = 200;
$('.Overlay :visible').each(function() //find all visible overlays
{
var currZIndex = $(this).attr('z-index');
maxZIndex = currZIndex > maxZIndex ? currZIndex : maxZIndex; //max, min alg.
}
$('#' + modalId).attr('z-index', maxZIndex + 1);
//... do some positioning of modal here
$('#' + modalId).show();
}
Positioning: You will need to write javascript to position your overlay over the desired area. I would think using absolute positioning will make this easy. Then obviously you should position the modal div in the center of the overlay div.
The calculations aren't really that hard to position something in a centered fashion. Let me know if you want my take on doing that piece.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
