4 4
4 4

jquery problem

by
devaldcool
devaldcool
Profile picture of devaldcool
devaldcool
Posts: Threads: Thanks: Account age: less than a second
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
    Andrew H
    Andrew H
    Profile picture of Andrew H
    Andrew H
    Posts: Threads: Thanks: Account age: less than a second
    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."
  • Profile picture of the author Brandon Tanner
    Brandon Tanner
    Brandon Tanner
    Profile picture of Brandon Tanner
    Brandon Tanner
    Posts: Threads: Thanks: Account age: less than a second
    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

  • Profile picture of the author SteveJohnson
    SteveJohnson
    SteveJohnson
    Profile picture of SteveJohnson
    SteveJohnson
    Posts: Threads: Thanks: Account age: less than a second
    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."

Trending Topics