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

是否有任何方法为jQuery对话框创建模式“范围”？作为一个有点人为的例子，我有一个页面：只使用jQuery UI制作屏幕模式的一部分

<!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-like div，每个div都有自己独立的一组模式对话框，仍然可以与其他div进行交互。

我知道如何使用jQuery UI库创建模态对话框;我的问题是关于将模态应用于页面的一部分而不是整个页面，或者使用此库，或者以一种轻松补充该库的方式。

来源

2011-06-10 Jeff

简单的解决方案是将一个隐藏的div作为覆盖。它将始终具有与“mainContent”div相同的尺寸和位置。然后使用z-index在内容顶部显示div。然后将您的模式放在叠加层上。

净效应，所有内容都将覆盖在主内容区域，但是您的模态将停留在覆盖层之上，因此用户只能与其交互。

编辑：

Z-索引管理：我会叠加的z-index正好被设置为高基数，以避免与其他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的中心。

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

来源

2011-06-10 15:45:45

关于这种方法的一些问题/评论。我认为我不再将对话框本身作为模态，因为那是我原来的问题的一部分。我是否需要为对话框和这些叠加层手动管理z-index，或者是否有办法获得对话框叠加层，并设置叠加层（例如少一个）？你碰巧知道jQuery对话框是自动居中到他们的父组件还是我需要构建到这个过程中的另一个逻辑位？ – Jeff 2011-06-13 14:32:18

@Jeff我在回答问题时添加了评论以解决您询问的问题。 – 2011-06-13 20:12:49

有没有我可以参考这个解决方案的任何页面？理想的解决方案对于一些伪HTML代码来说会很棒。会尝试自己做，并发布在这里:) – krizajb 2014-03-08 18:44:26

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

回答

相关问题