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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Modal Dialog won't centre on screen?

    Hey guys.

    Here's my website: www.alexgurr.co.uk

    I'm trying to get my modal window centred on the screen. I've tried every combo of fixed, relative, absolute. I had it working, then the navigation got bodged up so I started from my original index file, and now I cant get it working any ideas? You can see the dialog when you click the first project image. If you're right at the top its there but if you've are scrolled down the page at all and click it, it still opens at the top and doesn't move to the current center?

    Here's the code pertaining the window:

    Code:
    /*********************************************************************************/
    /* Modal Dialog                                                                        */
    /*********************************************************************************/
     
     
    #overlay {
        visibility: hidden;
         position: fixed;
         left: 0;
         top: 0;
         width:100%;
         height:100%;
         text-align:center;
         z-index: 1000;
         background-image:url(http://s18.postimg.org/5fexsq21h/image.png);
    }
     
    #overlay div {
     
         width: 50%;
         margin: 100px auto;
         background-color: #fff;
         border:1px solid #000;
         padding:15px;
         text-align:center;
         overflow:auto;
         -webkit-border-radius: 10px;
         -khtml-border-radius: 10px;	
         -moz-border-radius: 10px;
         -border-radius :10px;
    }
    Source file is available if you go to the website and use your browser.
    Thanks! Alex

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    I've always had to use javascript with absolute positioning to center modals. However someone may know a way that only uses css. I would be glad to hear about it if they did. But it generally needs to work in all browsers.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Tags for this Thread

    Posting Permissions

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