在jquery弹出窗口中禁用背景

问题描述

好的，所以我在这里有这个片段;

OK, So i have this snippet http://jsfiddle.net/8vFEd/ here;

每当弹出窗口出现时，我要么禁用后台，以便用户在关闭第一个弹出窗口之前无法点击另一种语言，或者我将如何实现每当用户点击第二语言时，第一个弹出窗口就会消失并显示相应的弹出窗口。

whenever the popup comes up, I either want to disable the background, so that users can't click on another language until they close the first popup, or how would I accomplish that, whenever users click on second language, the first popup disappears and its corresponding popup appears.

推荐答案

我的建议是覆盖在背景上，将点击点击到页面的其余部分。在< div class ='lang'> 追加调用之前，将以下内容添加到$（'。prop a'）。click（）函数中：

My suggestion would be to put an overlay over the background which will "catch" clicks through to the rest of the page. Add the following to your $('.prop a').click() function, before the <div class='lang'> append call:

$("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添加到弹出窗口中）

Then in your code for handling "close" clicks, remove this .modalOverlay from the DOM. Remember to add the overlay before your popup window so it sits behind the window (or add "z-index: 5" to your overlay css and "z-index: 6" to your popup css)

我还建议将 .lang css规则修改为 position：absolute; 或已修复而非相对。

I would also suggest modifying your .lang css rule to be position: absolute; or fixed instead of relative.

这篇关于在jquery弹出窗口中禁用背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！