jQuery 可调整大小句柄 z 索引

发布于 2024-10-11 16:41:45 字数 129 浏览 4 评论 0原文

我注意到 jQuery UI 的可调整大小的句柄位于页面中所有其他元素的顶部。我使用 Chrome 的开发人员工具进行了检查，发现它们自动给出了 1001 的 z 索引。有没有办法禁用此功能并只给它们与可调整大小的元素相同的 z 索引？谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑，眼淚并存 2024-10-18 16:41:45

对我来说效果最好，因为如果没有 !important 规则就会被覆盖。

.ui-resizable-handle { z-index: auto !important; }

Works best for me, cause without !important the rule gets overwritten.

.ui-resizable-handle { z-index: auto !important; }

回复收藏 0 原文

护你周全 2024-10-18 16:41:45

z-index 是使用 CSS 设置的，而不是 JavaScript。您将需要编辑负责的 CSS，在本例中：

.ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px; 
    z-index: 99999; 
    display: block;
}

或者定义您自己的规则来覆盖该行为。有关详细信息，请参阅此页面：http://www.mail- archive.com/[电子邮件受保护]/msg09524.html

The z-index is set with CSS, not JavaScript. You will need to edit the CSS responsible, in this case:

.ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px; 
    z-index: 99999; 
    display: block;
}

Or, define your own rule to override the behavior. See this page for more information: http://www.mail-archive.com/[email protected]/msg09524.html

回复收藏 0 原文

樱娆 2024-10-18 16:41:45

对于我们来说，这是覆盖 jQuery-ui 对象的默认设置的最方便且最简单的方法。您可以将“可调整大小”组件替换为其任何组件。只需确保它在加载 jQuery 之后但在 $(element).resziable() 调用之前运行即可。

$.extend($.ui.ressized.prototype.options, {
z索引：2147483647
});

回复收藏 0 原文

溺ぐ爱和你が 2024-10-18 16:41:45

而不必在 CSS 中添加 !important z-index 规则，您只需从可调整大小的原型中删除此选项，然后所有句柄将获得您在 CSS 中定义的 z-index。通常你甚至不需要定义一个。

// delete the zIndex property from resizable's options
// only have to do this once, before instantiating any resizables

delete $.ui.resizable.prototype.options.zIndex;

instead having to put !important z-index rules in your CSS, you can just remove this option from the resizable prototype, and then all handles will get the z-index you define in your CSS. usually you don't even have to define one.

// delete the zIndex property from resizable's options
// only have to do this once, before instantiating any resizables

delete $.ui.resizable.prototype.options.zIndex;

回复收藏 0 原文

软糯酥胸 2024-10-18 16:41:45

实际上，jQuery UI 1.12.1 可调整大小 resizer z-index默认值为90。

这是没有记录，但我们可以初始化它：

$(element).resizable({
  zIndex: 0,
});

// Red one, resizer appears through foreground divs
$("#w1").resizable(); // z-index resizer 90

// Gold one, no resizer appears through silver div
$("#w2").resizable({
  zIndex: 0, // z-index resizer 0
});

#w1, #w2, #w3 {
  position: absolute;
  width: 150px;
  height: 100px;
}

#w1 {
  left: 10px;
  top: 10px;
  background-color: red;
}

#w2 {
  left: 40px;
  top: 40px;
  background-color: gold;
}

#w3 {
  left: 70px;
  top: 70px;
  background-color: silver;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="w1"></div>
<div id="w2"></div>
<div id="w3"></div>

Actually, jQuery UI 1.12.1 Resizable resizer z-index default is 90.

That's not documented, but we can initialize it :

$(element).resizable({
  zIndex: 0,
});

// Red one, resizer appears through foreground divs
$("#w1").resizable(); // z-index resizer 90

// Gold one, no resizer appears through silver div
$("#w2").resizable({
  zIndex: 0, // z-index resizer 0
});

#w1, #w2, #w3 {
  position: absolute;
  width: 150px;
  height: 100px;
}

#w1 {
  left: 10px;
  top: 10px;
  background-color: red;
}

#w2 {
  left: 40px;
  top: 40px;
  background-color: gold;
}

#w3 {
  left: 70px;
  top: 70px;
  background-color: silver;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="w1"></div>
<div id="w2"></div>
<div id="w3"></div>

回复收藏 0 原文

~没有更多了~