OK, So i have this snippet / here;

whenever the popup es 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 acplish that, whenever users click on second language, the first popup disappears and its corresponding popup appears.

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

whenever the popup es 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 acplish that, whenever users click on second language, the first popup disappears and its corresponding popup appears.

• javascript
• jquery
• html
• css
• modalpopup

2 Answers 2

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">');

and this to your 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)

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

Add this at beginning of your onclick

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

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