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

2018-05-31 15:55:46

有什么办法可以为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的中心。

计算并不是很难以中心的方式来定位。让我知道你是否想让我做那件事。

链接地址: http://www.djcxy.com/p/7575.html

上一篇: Making only portion of screen modal with jQuery UI

下一篇: Compare committed revision with server one for the same branch