javascript - 在 jquery 弹出窗口中禁用背景

Question

好的，所以我在这里有这个片段 http://jsfiddle.net/8vFEd/ ；

每当弹出窗口出现时，我要么想禁用背景，以便用户在关闭第一个弹出窗口之前不能点击另一种语言，或者我将如何实现这一点，每当用户点击第二种语言时，第一个弹出窗口就会消失并且出现相应的弹出窗口。

Answer 1

我的建议是在背景上放置一个覆盖层，这将“捕捉”到页面其余部分的点击。<div class='lang'>在追加调用之前，将以下内容添加到您的 $('.prop a').click() 函数中：

$("body").append('<div class="modalOverlay">');

这对你的CSS：

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.3); /* black semi-transparent */
}

然后在处理“关闭”点击的代码中，从 DOM 中删除这个 .modalOverlay 。请记住在弹出窗口之前添加叠加层，使其位于窗口后面（或将“z-index：5”添加到您的叠加层 css 和“z-index：6”到您的弹出 css）

我还建议将您的.langcss 规则修改为position: absolute;或fixed而不是相对。

Answer 2

在你的 onclick 开头添加这个

$(".lang").remove();

这将在用新的 DOM 重新绘制 DOM 之前使用 lang 类删除或清除 div。