使用jQuery UI只制作屏幕模态的一部分 [英] Making only portion of screen modal with jQuery UI
问题描述
有没有办法为jQuery对话框创建模态范围？作为一个有点人为的例子，我有一个页面：
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>
我想为mainContent区域创建一些模态对话框。当对话框打开时，我希望不允许与mainContent区域进行交互，但仍允许与工具栏和页脚进行交互。
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.
或者如果页面有多个mainContent-像div一样，每个都有自己独立的模态对话框，仍然允许与其他div交互。
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.
我知道如何使用jQuery UI库创建模态对话框;我的问题是关于将模态应用于页面的一部分而不是整个页面，使用此库，或者以一种轻松补充此库的方式。
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.
推荐答案
简单的解决方案是使用隐藏的div作为叠加层。它总是与mainContentdiv具有相同的尺寸和位置。然后使用z-index显示内容顶部的div。然后将你的模态放在叠加层的顶部。
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.
编辑：
Z-index管理
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();
}
定位：您需要编写javascript来将叠加层放置在所需区域上。我会认为使用绝对定位这将使这很容易。然后显然你应该将模态div放在叠加div的中心。
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.
这篇关于使用jQuery UI只制作屏幕模态的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
