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
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    461
    Thanks
    7
    Thanked 3 Times in 3 Posts

    position overlay bang in center of page, with scroll disabled or like that.

    What I am trying to get is the overlay box to be positioned say 4 inches from the left side of the screen. With out the user having to scroll to the top of the page to view the overlay as it always goes to the top of the page by default.

    How can this be positioned so it will go where the viewpoint of the window is at that time, or better still have it bang in the middle of the page with 'no' scroll effect for anything. overlay or the background which is the webpage.

    relevant snippets of my code.

    JS
    Code:
    function showOverlay() {
    	document.getElementById('light').style.display='block';
    	document.getElementById('fade').style.display='block';
    }

    HTML/PHP
    Code:
    <form action="addItem.php" method="post" enctype="multipart/form-data">
    <input type="submit" name="upload" value="Upload Item" onclick="showOverlay();"> <input type="reset" value=" Clear ">
    </form>
    
    
    
    
    
    <div id="light" class="white_content"><div style="text-align: right;"><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';"><img src="images/cross_close.png" class="fb_close" alt="close"></a></div>
    </div>
    <div id="fade" class="black_overlay">
    <?
    //	text to show.
    echo(htmlspecialchars($message));
    ?>
    </div>
    
    <?
    if(isset($_SESSION['user'])) {
    overLayBox("Your details are being updated, please wait.");
    }
    ?>


    CSS
    Code:
    .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    
    .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 30%;
    height: 55%;
    padding: 1em;
    border: 0.2em solid lightblue;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    I can't see reinventing the wheel when every auto store is selling one. Look at these pages for a copy/paste answer to you problem:
    http://lokeshdhakar.com/projects/lightbox/ for Lightbox JS

    and: boxy here http://onehackoranother.com/projects/jquery/boxy/

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    position : fixed is what you should use when you want to position relative to the browser rather than relative to the page. Then just set top and left values or bottom and right values to position it.
    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.


  •  

    Posting Permissions

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