gpt4 book ai didi

jquery - 当显示 jquery 确认对话框时滚动条消失

转载 作者:行者123 更新时间:2023-12-01 07:06:10 25 4
gpt4 key购买 nike

当显示 jquery 确认对话框时,页面上的滚动条消失,这导致页面跳转到右侧。对话的JavaScript代码如下:

<script src="vendor/jquery-confirm.min.js"></script>
<link href="vendor/jquery-confirm.min.css" rel="stylesheet" type="text/css">
<script>
function confirmDialog(content, func, parameter) {
$.confirm({
title: "",
content: content,
confirmButton: "Yes",
cancelButton: "No",
theme: "black",
confirm: function() { func(parameter); },
cancel: function() { }
});
}
</script>

我正在使用CSS:

body {
overflow-y: scroll;
}

如何防止这种情况发生?

更新

我尝试添加“重要”,但在 Firefox 中检查页面时我发现有这样的 CSS:

body.jconfirm-noscroll {
overflow: hidden !important;
}

有一条线穿过:

overflow-y: scroll !important;

最佳答案

CSS 是数学。每个选择器都归结为一个特异性编号。如果数字相等,则应用最后一个。如果它们不相等,则无论顺序如何,都适用最高的值。

您可以尝试使用类似 specificity calculator 的工具将选择器链接到特定数字,但实际上您不需要这样做。

总体要点是:

!important > style="inline rules" > #id > .class > attribute = element

您尝试覆盖的选择器是:

body.jconfirm-noscroll {
some rule !important;
}

这意味着!important + 1 x class + 1 x element 。您可以使用相同的选择器覆盖它,只要您的选择器位于页面较低的位置(稍后由浏览器解析)。

或者,为了确保安全,您可以使用

覆盖它
html body.jconfirm-noscroll {
some rule !important;
}

或者,当然,如果您知道 body 上有任何其他类,请将其添加到选择器中。或者输入 #id<body>并使用它。它将击败 .class 。但你无法击败body.class !importantbody !important 。这是肯定的。

<小时/>

重要说明:在某些情况下,您绝对确定您的选择器更强,但它仍然拒绝应用。别灰心。这发生在我们所有人身上。根据经验,在以下任何一种情况下它都会失败:

  • 您的上一条规则存在语法错误,该错误会禁用您当前正在查看的规则(检查是否有未闭合的大括号)
  • 应用更强大的选择器。请注意,内联样式(放置在元素的 style 属性中)实际上比 #id 更强。 s。这就是通过 javascript 应用样式的原因通常适用。它们不会覆盖 !important不过,
  • 你的标记完全被破坏了。在极少数情况下,当您的标记无效时,CSS 将不适用,因为您正在查看的元素不是您认为适合浏览器的元素。我说的是嵌套 <a> 的情况标签和类似内容
  • 如果上述方法都没有帮助,请仔细检查您的选择器。一步步对照标记进行检查。确保该有的地方有空格,不该有的地方没有。我被(有些人)认为是 CSS 专家,但你会惊讶于我写了多少次错误的选择器,而且我花了一两分钟才发现拼写错误。我猜这与人类有关。

关于jquery - 当显示 jquery 确认对话框时滚动条消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44420481/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com