3 replies
Hey warriors,
I have a login system to log users in. For this, I have built the login in a box with display:none in css. After clicking the log in button, the body's opacity is changed from 1 to 0.5 by jquery css() method. The login box appears by using the same css() method. But the problem is that the mouse still responses to the links in the body. So, I want that the links in my website cannot be clicked till the box is closed. Please tell me how to do it?
Thanks in advance.
#jquery #problem
  • Profile picture of the author Andrew H
    Dont change the opacity of the body, creat a new div inside the body to cover the content.

    Code:
    //css
    #loader {
       width:100%;
       position:absolute;
       display:none;
       background:#333;
       opacity:0.5;
    }
    //jQuery
    $('#modalbox_button').click(function() {
        //fire your login modal here
        var bodyheight = $('body').height();
        $('#loader').css('height', bodyheight);
        $('#loader').css('display', 'block');
    });
    //HTML
    <body>
    <div id="loader"></div>
    // rest of content
    </body>
    Something like that.
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[7883902].message }}
  • Profile picture of the author Brandon Tanner
    If all you want to do is make the links in the main content area temporarily un-clickable, then you can simply do this...

    Code:
    $('.bodyLinks').attr('onClick', 'return false');
    And if/when you need to reset those links to work again...

    Code:
    $('.bodyLinks').attr('onClick', 'return true');
    ^ The above examples assume all of the links in the main content area are in a class named "bodyLinks" (and that no links in the login popup are in that class).
    Signature

    {{ DiscussionBoard.errors[7884028].message }}
  • Profile picture of the author SteveJohnson
    If you want to make the rest of your page elements unclickable, you'll need to take Andrew's suggestion a little bit further. You'll want to make sure your overlay truly overlays the rest of the page content using z-index (notice 'position: relative' on the dialog box - browsers ignore z-index unless the container has a position other than 'static').

    Also, if you don't want to clutter up your page HTML, you can use jQuery to add the overlay container...
    Code:
    //css
    #loader {
        width:100%;
        position:absolute;
        display:none;
        background:#333;
        opacity:0.5;
        z-index: 10001;
    }
    #dialog-box {
       position: relative;
       z-index: 10002;
    }
    
    //jQuery
    $('body').append('<div id="loader"></div>');
    $('#modalbox_button').click(function() {
         //fire your login modal here
         var bodyheight = $('body').height();
         $('#loader').css('height', bodyheight);
         $('#loader').css('display', 'block');
    });
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7885221].message }}

Trending Topics