Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: zIndex question

  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    zIndex question

    Hi. I´m trying to overlay a div box over a input element so this overlay div should act as a modal over the input element, but i think i´m doing something wrong. Plese refer to the code snippet below:


    Code:
    <script type="text/javascript">
    //debugger;
    var oModalBackground = document.createElement('div');
    oModalBackground.className = "modalBackground";
    oModalBackground.style.width = 800;
    oModalBackground.style.height = 800;
    oModalBackground.style.position = "absolute";
    oModalBackground.style.zIndex = 10000;
    document.body.appendChild(oModalBackground);
    </script>
    
    <style type="text/css">
    .modalBackground
    {
    border:solid 1px #ccc;
    }
    </style>
    
    <input type="button" value="teste" />
    The button is still clickable!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You haven't assigned a zIndex to the button and it therefore automatically gets one theat is one greater than that of the previous element which puts it in front of your modal div.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by KenA View Post
    Code:
    oModalBackground.style.width = 800;
    oModalBackground.style.height = 800;
    The button is still clickable!
    For one, units are required in CSS. Thus:

    Code:
    oModalBackground.style.width = "800px";
    oModalBackground.style.height = "800px";
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •