Question

有没有办法为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库创建模态对话框;我的问题是关于将模态应用于页面的一部分而不是整个页面，使用此库，或者以一种轻松补充此库的方式。

Answer 1

简单的解决方案是使用隐藏的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的中心。

计算并不是很难以一种集中的方式定位。如果你想要我做这件事，请告诉我。

使用jQuery UI只制作屏幕模态的一部分

1 个答案: