javascriptjqueryhtmlcssmodalpopup

disable background in jquery popup

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.

Solution

  • 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.