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

Share Improve this question Follow edited Aug 25, 2011 at 6:35 Wasim Karani 8,8641010 gold badges5757 silver badges100100 bronze badges asked Aug 25, 2011 at 5:19 MikeMike 3,4181111 gold badges4747 silver badges8080 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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.