有没有办法为jQuery对话框创建模态“范围”?作为一个有点人为的例子,我有一个页面:
<!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区域进行交互,但仍允许与工具栏和页脚进行交互。
或者如果一个页面有多个类似mainContent的div,每个div都有自己独立的一组模态对话框,仍允许与其他div交互。
我知道如何使用jQuery UI库创建模态对话框;我的问题是关于将模态应用于页面的一部分而不是整个页面,使用此库,或者以一种轻松补充此库的方式。
答案 0 :(得分:3)
简单的解决方案是使用隐藏的div作为叠加层。它总是与“mainContent”div具有相同的尺寸和位置。然后使用z-index显示内容顶部的div。然后将模态放在叠加层的顶部。
净效果,所有内容都将通过叠加层覆盖在主要内容区域中,但您的模式将停留在叠加层之上,因此用户只能与其进行交互。
编辑:
Z-index管理:我只是将覆盖z-index设置为高基数,以避免与其他z-index冲突。然后每当显示模态时,只需要查找显示叠加层的jquery选择器,并将模态z-index增加一个该数字。
.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的中心。
计算并不是很难以一种集中的方式定位。如果你想要我做这件事,请告诉我。