在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"添加到弹出窗口中)

我也建议修改你的.langCSS规则是position: absolute;或fixed不是的亲戚.