Question

我制作了一个简单的灯箱：

 $(document).ready(function() {
       $(".abc").click(function(event) {
           event.preventDefault();
           var href = $(this).attr("href");
           $(".bucket").load(href);
           $(".overlay").css({"display": "block"});
           $("body").css({"overflow": "hidden"});

       });
       $(".overlay, .close").on('click', function(e) {
           if( e.target !== this ) 
                return;
           $("body").css({"overflow": "visible"});
           $(this).hide(); 
       });
   });

正如您所见，我通过applieng overflow：hidden。

禁用了身体滚动条

灯箱关闭后，我将溢出属性重置为正常。

不知怎的，一切都搞砸了。所有字体大小似乎都是随机变化的。

可能是什么问题？

这是一个演示：

点击“ABC”链接查看效果：

http://www.deutsch-lernen.com/DLOneu/learn-german-online/beginners/uebung9_1.php#top

Answer 1

当你的灯箱打开时我相信它包含了alleSeiten.css，它正在全局改变锚点和其他风格。这是为了改变顶层菜单和其他地方的字体。

锚标记的默认样式是： -

一个：活性{ 颜色：继承; 显示：块; font-size：14px; padding-top：10px; text-decoration：none; text-transform：大写; 宽度：100％; }

对于alleSeiten.css，它是： -

a { 颜色：＃666666; font-family：Verdana，Arial，Helvetica，sans-serif; font-size：8pt; font-style：normal; font-weight：bold; line-height：normal; }

您需要对alleSeiten.css进行更改，以免影响页面样式。最终它会覆盖你的style.css样式。

Answer 2

使用css（）方法的方法是替换所选元素的整个css代码。请尝试以下操作仅更改特定的css属性（显示/溢出）：

错：

$(".overlay").css({"display": "block"});

正确：

$('.overlay').css('display', 'block');

用jquery搞乱字体大小重置溢出

2 个答案: