Javascript 在 jquery 弹出窗口中禁用背景

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7185469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 01:14:58  来源:igfitidea点击:

disable background in jquery popup

javascriptjqueryhtmlcssmodalpopup

提问by Mike

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

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

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.

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

回答by Tom McKenzie

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:

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

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

and this to your css:

这对你的css:

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

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)

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

I would also suggest modifying your .langcss rule to be position: absolute;or fixedinstead of relative.

我还建议将您的.langcss 规则修改为position: absolute;fixed代替相对规则。

回答by Infinity

Add this at beginning of your onclick

在您的 onclick 开头添加此内容

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

That will remove or clear the div with lang class before repainting the DOM with a new one.

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