Question

我对jQuery很新，所以希望这不是太难。我会试着坚持一个简单的例子。

假设我有一个带有div的网页（可能是其他元素，如img，span等）。当用户将鼠标悬停在该div上时，我希望div保持不变，但是将覆盖应用于其他所有内容，以便其余部分显示为灰色。所以基本上它会让这个div看起来像是模态的（类似于模态对话框）。我希望div保持在同一个位置，具有相同的背景颜色等。

我找到了进行模态对话的示例，但它总是以屏幕为中心。如果我可以将元素保留在同一个地方，那么该功能将起作用。有什么想法吗？

谢谢！吉姆

Answer 1

我选择以这种方式看待它。

http://jsfiddle.net/uEwry/2/

创建一个类来检测哪些元素应该触发模态效果。
当moused克隆元素并触发模态效果时
将克隆元素放在现有元素上
在克隆元素的mouseout上撤消效果并删除克隆

.gomodal { border: 1px dotted red; background: white; }
.modal { border: 1px solid black; position: fixed; top: 0; left: 0; }
#grayout { background: lightgray; opacity: .8; display: none; position: fixed; }


$('.gomodal').mouseover(function() {
    var cloned = $(this)
        .clone()
        .addClass('modal')
        .css('top', $(this).offset().top)
        .css('left', $(this).offset().left); 
    $('body').append(cloned);
    $('#grayout').css('height', $(document).height()).css('width', $(document).width()).fadeIn();
});

$('body').on('mouseout', '.modal', function() {
    $('#grayout').fadeOut();
    $(this).remove();
});

Answer 2

当你说“变灰”时，你的意思是“暗影盒”吗？也就是说，一个阴影覆盖在页面上的所有其他元素上？

如果是这种情况，那么创建一个绝对定位在整个身体上的div，其中不透明度设置为半透明。然后将该div作为z-index样式放在其他所有内容之上，并将其显示样式设置为“none”。这将作为你的“影子盒”。

当用户与目标div交互时，将其z-index样式更改为高于阴影框div，然后将阴影框显示样式设置为“阻止”。当用户完成交互时，请执行相反的操作。

如果您需要代码示例，请告诉我。

使用jQuery在页面模态上创建元素（不是对话框）

2 个答案: