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

Question

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

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

Answer 1

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

$("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)

我还建议修改您的 .lang css 规则为 position: absolute;或 fixed而不是亲戚。