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,628
    Thanks
    0
    Thanked 648 Times in 638 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,300
    Thanks
    28
    Thanked 275 Times in 269 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
    •