Jef*_*eff 7 javascript jquery-ui modal-dialog
有没有办法为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库创建模态对话框; 我的问题是关于将模态应用于页面的一部分而不是整个页面,使用此库,或者以一种轻松补充此库的方式.
简单的解决方案是有一个隐藏的 div 来充当覆盖层。它始终具有与“mainContent”div 相同的尺寸和位置。然后使用 z-index 在内容顶部显示该 div。然后将模态框放在叠加层的顶部。
最终效果是，所有内容都将被覆盖层覆盖在主要内容区域中，但您的模式将停留在覆盖层之上，因此用户只能与其交互。
编辑：
Z 索引管理：我只需将覆盖 z 索引设置为高基数，以避免与其他 z 索引发生冲突。然后，每当显示模态时，只需使用 jquery 选择器来查找显示的叠加层，并将模态 z 索引增加该数字之一。
.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 的中心。
以居中方式定位某些东西的计算实际上并不难。如果您想了解我对这件作品的看法，请告诉我。
| 归档时间： |
|
| 查看次数： |
1629 次 |
| 最近记录： |