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 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Simple Onclick Popup Window

    First of all i'd like to say i am not an expert in these types of things so pardon me if the wording for certain things is off. So i have a button on my homepage. I want the button (When clicked) to create a ''popup'' window with my website terms and conditions in it. ''I agree'' and ''Exit'' should be the two main options the person has. When '''I agree'' is clicked they are redirected to a certain URL. When ''Exit'' is clicked the ''popup'' window goes away. Will someone help me with this i would be beyond grateful
    I envision it to be like this
    Last edited by yoursisless; 03-18-2013 at 03:05 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    Well, you really do *NOT* want a popup window. Reason: some people agressively block popups.

    What you want is a "POPON". And those are not blocked by popup blockers.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: large; }
    
    #popon {
        display : none;
        border: solid 3px blue;
        background-color: lightblue;
        position: absolute;
        top: 100px; left: 100px;
        width: 400px; height: 300px;
        text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="popon">
    <br/>
    I agree to pay to<br/>
    Yoursisless at the rate of<br/>
    $500 per hour<br/> for use of this web site.
    <br/><br/>
    <input type="button" id="agree" value="I agree"/>
    <input type="button" id="nope" value="Exit" />
    </div>
    
    <div>
    <br/><br/>
    Wow, this is such a great site!<br/><br/>
    <input type="button" id="showAgreement" value="Let me in now!"/>
    <br/>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          document.getElementById("showAgreement").onclick =
              function() 
              { 
                  document.getElementById("popon").style.display = "block";
              }
          document.getElementById("agree").onclick =
              function() 
              {
                  location.href = "http://www.google.com";
              }
          document.getElementById("nope").onclick =
              function() 
              {
                  document.getElementById("popon").style.display = "none";
              }
    
      }
    )();
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    yoursisless (03-18-2013)

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, you really do *NOT* want a popup window. Reason: some people agressively block popups.

    What you want is a "POPON". And those are not blocked by popup blockers.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: large; }
    
    #popon {
        display : none;
        border: solid 3px blue;
        background-color: lightblue;
        position: absolute;
        top: 100px; left: 100px;
        width: 400px; height: 300px;
        text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="popon">
    <br/>
    I agree to pay to<br/>
    Yoursisless at the rate of<br/>
    $500 per hour<br/> for use of this web site.
    <br/><br/>
    <input type="button" id="agree" value="I agree"/>
    <input type="button" id="nope" value="Exit" />
    </div>
    
    <div>
    <br/><br/>
    Wow, this is such a great site!<br/><br/>
    <input type="button" id="showAgreement" value="Let me in now!"/>
    <br/>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          document.getElementById("showAgreement").onclick =
              function() 
              { 
                  document.getElementById("popon").style.display = "block";
              }
          document.getElementById("agree").onclick =
              function() 
              {
                  location.href = "http://www.google.com";
              }
          document.getElementById("nope").onclick =
              function() 
              {
                  document.getElementById("popon").style.display = "none";
              }
    
      }
    )();
    </script>
    
    </body>
    </html>
    That is perfect! you just made my day. How do i make this work with an existing button? Here is the code for the button i am currently using:
    <input type="button" onclick="document.location = ('http://www.google.com/');" value="Redirect"> and how do i get my full terms of conditions displayed in the box with a navbar?

    EDIT: I am having some trouble implementing this on a regular button. I have 3 buttons on my website each of the 3 need to have this same code so if any of the 3 are clicked the popon will appear

    EDIT 2: Is there anyway to make your popon look like a popup? I am trying to use this code but it just does not look good. The box is very unappealing.. Is there any way you could code it to make it look kind of like what i pictured above? I would be willing to give you a few bucks for it. and also the location of the box when clicked is crazy sometimes it shows up on the very far left of the screen where no one thinks to look
    Last edited by yoursisless; 03-18-2013 at 04:09 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    You can style/position the popon any way you like using css. Old Pedant simply gave you an example. You ought to be able to do this for yourself.

    Old Pedant made his scripts unobtrusive which IMO in this case just adds complication for no real added value, and prevents you from using multiple buttons.

    Try this instead:-

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: large; }
    
    #popon {
        display : none;
        border: solid 3px blue;
        background-color: lightblue;
        position: absolute;
        top: 100px; left: 100px;
        width: 400px; height: 300px;
        text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="popon">
    <br/>
    I agree to pay to<br/>
    XYZ Inc at the rate of<br/>
    $500 per hour<br/> for use of this web site.
    <br/><br/>
    <input type="button" id="agree" value="I agree" onclick = "agreeTerms()"/>
    <input type="button" id="nope" value="Exit"  onclick = "exit()"/>
    </div>
    
    <div>
    <br/><br/>
    Wow, this is such a great site!<br/><br/>
    <input type="button" id="showAgreement1" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    <input type="button" id="showAgreement2" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    <input type="button" id="showAgreement3" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    
    </div>
    
    <script type="text/javascript">
    
    function showPopon() {
    document.getElementById("popon").style.display = "block";
    }
    
    function agreeTerms () {
    location.href = "http://www.google.com";
    }
    
    function exit() {
    document.getElementById("popon").style.display = "none";
    }
    
    </script>
    
    </body>
    </html>

    You were given advice about how to get your text displayed in a div with a navbar in your previous thread. Why have you started a new one on the same topic?
    Here is another example:-

    Code:
    <html>
    <head>
    
    <style type = "text/css">
    #content {
        width: 50%;
        height: 200px;
        margin: 0 auto;
        border: 1px solid black;
        background: #eeeecc;
        overflow: scroll;  //* Note with this value you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.*//
    }
    </style>
    
    </head>
    
    <body>
    
    <div id = "content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor. 
    <br><br>
    Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id, tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros, non pretium ligula feugiat ac. Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo. In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque. Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus libero, convallis a placerat id, feugiat vitae leo. 
    
    </div>
    
    </body>
    </html>
    Again, you can style/position the div content (fonts etc.) using css. But you cannot expect others to do all your work for you. As was pointed out earlier, this forum is not a free coding service.

    Finally, and once again, it is essential/mandatory that you validate the user's agreement to the terms on the server. Otherwise it can simply be bypassed, and is consequently useless. The user can also just View Source to see the url of the redirect page, and go directly to it. In any case, why do you want a lot of legal gobbledegook with lengthy terms and conditions which realistically you cannot enforce? I have the idea that you do not entirely understand all the dimensions of what you are doing.

    Or are we talking about an "adult" or a gambling site?
    Last edited by Philip M; 03-18-2013 at 10:54 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Mar 2013
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    You can style/position the popon any way you like using css. Old Pedant simply gave you an example. You ought to be able to do this for yourself.

    Old Pedant made his scripts unobtrusive which IMO in this case just adds complication for no real added value, and prevents you from using multiple buttons.

    Try this instead:-

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: large; }
    
    #popon {
        display : none;
        border: solid 3px blue;
        background-color: lightblue;
        position: absolute;
        top: 100px; left: 100px;
        width: 400px; height: 300px;
        text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="popon">
    <br/>
    I agree to pay to<br/>
    XYZ Inc at the rate of<br/>
    $500 per hour<br/> for use of this web site.
    <br/><br/>
    <input type="button" id="agree" value="I agree" onclick = "agreeTerms()"/>
    <input type="button" id="nope" value="Exit"  onclick = "exit()"/>
    </div>
    
    <div>
    <br/><br/>
    Wow, this is such a great site!<br/><br/>
    <input type="button" id="showAgreement1" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    <input type="button" id="showAgreement2" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    <input type="button" id="showAgreement3" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    
    </div>
    
    <script type="text/javascript">
    
    function showPopon() {
    document.getElementById("popon").style.display = "block";
    }
    
    function agreeTerms () {
    location.href = "http://www.google.com";
    }
    
    function exit() {
    document.getElementById("popon").style.display = "none";
    }
    
    </script>
    
    </body>
    </html>

    You were given advice about how to get your text displayed in a div with a navbar in your previous thread. Why have you started a new one on the same topic?
    Here is another example:-

    Code:
    <html>
    <head>
    
    <style type = "text/css">
    #content {
        width: 50%;
        height: 200px;
        margin: 0 auto;
        border: 1px solid black;
        background: #eeeecc;
        overflow: scroll;  //* Note with this value you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.*//
    }
    </style>
    
    </head>
    
    <body>
    
    <div id = "content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor. 
    <br><br>
    Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id, tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros, non pretium ligula feugiat ac. Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo. In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque. Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus libero, convallis a placerat id, feugiat vitae leo. 
    
    </div>
    
    </body>
    </html>
    Again, you can style/position the div content (fonts etc.) using css. But you cannot expect others to do all your work for you. As was pointed out earlier, this forum is not a free coding service.

    Finally, and once again, it is essential/mandatory that you validate the user's agreement to the terms on the server. Otherwise it can simply be bypassed, and is consequently useless. The user can also just View Source to see the url of the redirect page, and go directly to it. In any case, why do you want a lot of legal gobbledegook with lengthy terms and conditions which realistically you cannot enforce? I have the idea that you do not entirely understand all the dimensions of what you are doing.

    Or are we talking about an "adult" or a gambling site?
    First let me say thank you for your help it is greatly appreciated. I have 3 buttons all horizontally aligned on my website. Above each of them is a choice of selection of 3 different ways to use my site. Lets use Alpha, Beta, Ceta as examples. Under all 3 there is text that describes each of them as well as a button
    These buttons when on clicked i would like to activate my term of service agreement where they will need to agree to continue using my website. I understand i should have it validated a system and i do have that in mind but i want to leave that for a later time. For now however i just want the 3 buttons to activate on click my tos and an option to agree or close (Which you have all graciously helped me with )
    The problem i am having with the code is it is almost impossible for me to change each buttons coding without moving their location completely either way up or way down where they are suppose to be. (All 3 were perfectly aligned horizontally but when i implement the code to each button they go in totally wacky positions. One of them was so far below the Alpha's text i could barely see it. While the other was way above where it should be
    I need a simple code that will allow me to implement it on to EACH button code individually
    My current button codes is
    Code:
     (ALPHA)<input type="button" onclick="document.location = ('http://www.google.com/');" value="alpha">
    Code:
    (BETA)
    
    <input type="button" onclick="document.location = ('http://www.google.com/');" value="beta">
    Code:
    (CETA)
    
    <input type="button" onclick="document.location = ('http://www.google.com/');" value="ceta">


    What i did with the code Old Pendant gave me was

    Code:
    (BETA)
    
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: large; }
    
    #popon {
        display : none;
        border: solid 3px black;
        background-color: lightgray;
        position: absolute;
        top: 100px; left: 100px;
        width: 400px; height: 200;
        text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="popon">
    <br/>
    Agree to the terms of service to continue<br/>
    
    
    <input type="button" id="agree" value="I Agree"/>
    <input type="button" id="nope" value="Close" />
    </div>
    
    <div>
    <br/><br/>
    <input type="button" onclick="document.location = ('http://www.google.com/');" value="beta">
    <br/>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          document.getElementById("showAgreement").onclick =
              function() 
              { 
                  document.getElementById("popon").style.display = "block";
              }
          document.getElementById("agree").onclick =
              function() 
              {
                  location.href = "www.http://www.google.com/";
              }
          document.getElementById("nope").onclick =
              function() 
              {
                  document.getElementById("popon").style.display = "none";
              }
    
      }
    )();
    </script>
    Basially if you could not tell all i did was replace the normal button code with the code from old pendant....
    That may not seem right but to my knowledge of coding (Which is minimal) that is the best i could come up with. I would really appretiate it if i got a code that i could just add on to my current button code
    FROM THIS
    <input type="button" onclick="document.location = ('http://www.google.com/');" value="ceta">

    TO THIS
    <input type="button" onclick="activate the popon;" value="ceta">

    I could really use the simplicity and ease of adding it to coding
    Last edited by yoursisless; 03-18-2013 at 05:04 PM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    This is getting to be like stirring treacle with a piece of bent tin.

    What is wrong with the code I gave you?

    Code:
    <input type="button" id="showAgreement1" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    <input type="button" id="showAgreement2" value="Let me in now!" onclick = "showPopon()"/>
    <br><br>
    <input type="button" id="showAgreement3" value="Let me in now!" onclick = "showPopon()"/>
    The third letter of the Greek alphabet is Gamma.

    You seem to have ignored my remark - "Again, you can style/position the div content (fonts etc.) using css". But you cannot expect others to do all your work for you. As was pointed out earlier, this forum is not a free coding service. You should make an effort and learn a little css.

    And the guy's name is Old Pedant, not Old Pendant.
    Last edited by Philip M; 03-18-2013 at 06:03 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Mar 2013
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I just implemented the code and it worked perfectly. I thought i would have to put it on each button individually but it turns out i didn't need to. Well it's working brilliantly now only problem i have is the location of the popon when clicked. It shows up in some outrageous positions. How do i make it show up in the exact center of the webpage?
    Right now the code is
    Code:
    position: absolute;
    i tried
    PHP Code:
    positioncenter
    PHP Code:
    positionright
    PHP Code:
    positionleft
    They all fail to please and some of them
    PHP Code:
    positionleft
    do not show up at all because it is cut off by the button

    PHP Code:
    positionabsolute
    is the best i have got but even that is way off page and unattractive

    I have tried this with some success. It moved to the bottom of the page and it is somewhat easier to see.. Although i do not understand why even when i change the px number it does not move.
    Code:
    position: absolute;  top:50 bottom:100px
    Last edited by yoursisless; 03-18-2013 at 07:23 PM.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    You are nothing if not thick-skinned!

    You seem to have ignored my remark - "Again, you can style/position the div content (fonts etc.) using css". But you cannot expect others to do all your work for you. As was pointed out earlier, this forum is not a free coding service. You should make an effort and learn a little css.

    What part of that did you not understand?

    You can find out how to center a div by Googling. Example:-

    http://www.thesitewizard.com/css/center-div-block.shtml

    But I would have thought that anyone of moderate intelligence could adjust the absolute values in

    Code:
    top: 100px; left: 100px;
    width: 400px; height: 300px;
    to obtain the positioning required.

    Those values define the position of the popon. That position is fixed and cannot "show up in some outrageous positions".
    Last edited by Philip M; 03-18-2013 at 07:16 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    New Coder
    Join Date
    Mar 2013
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    top: 100px; left: 100px;
    width: 400px; height: 300px;
    to obtain the positioning required.

    Those values define the position of the popon. That position is fixed and cannot "show up in some outrageous positions".
    I think you are the one who may not understand. I already tried that and it did not work changing the number before px does nothing. I thought i made that clear. Now it may be something preventing it from doing what it would normally do (maybe coding?) but i told you it is not moving no matter what it changes to so i don't think i was doing anything wrong
    Also i do not expect you to do anything for me but i do think a certain amount of help is what a forum like this is for don't you agree.

    But I would have thought that anyone of moderate intelligence could adjust the absolute values in


    I'll search around Google and see what pops up. But thanks for the help though

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    If you don't find a CSS solution that works in all browsers, here a JavaScript answer:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: large; }
    
    #popon {
        display : none;
        border: solid 3px blue;
        background-color: lightblue;
        position: absolute;
        width: 400px; height: 300px;
        text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="popon">
    <br/>
    I agree to pay to<br/>
    Yoursisless at the rate of<br/>
    $500 per hour<br/> for use of this web site.
    <br/><br/>
    <input type="button" id="agree" value="I agree"/>
    <input type="button" id="nope" value="Exit" />
    </div>
    
    <div>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    stuff<br/><br/>
    Wow, this is such a great site!<br/><br/>
    <div id="howToGetIn" style="margin-left: 500px;">
        <input type="button" value="Alpha"/><br/>
        <input type="button" value="Beta"/><br/>
        <input type="button" value="Gamma"/>
    </div>
    <br/>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var popper = document.getElementById("popon");
          var inps = document.getElementById("howToGetIn").getElementsByTagName("input");
          for ( var i=0; i < inps.length; ++i )
          {
              inps[i].onclick = showPop;
          }
          function showPop( )
          {
              popper.style.left = 
                  Math.round( (window.innerWidth - 400) / 2 + document.body.scrollLeft ) + "px";
              popper.style.top = 
                  Math.round( (window.innerHeight - 300) / 2 + document.body.scrollTop ) + "px";
              popper.style.display = "block";
          }
          document.getElementById("agree").onclick =
              function() 
              {
                  location.href = "http://www.google.com";
              }
          document.getElementById("nope").onclick =
              function() 
              {
                  popper.style.display = "none";
              }
    
      }
    )();
    </script>
    
    </body>
    </html>
    So you can see that even when you have to scroll way down to the buttons, the popon is still centered.

    Then make your window as wide or narrow as you want and test it. Make it narrow enough so that you have to scroll horizontally to see the buttons, and then click one.

    'nuf said?

    Notice the agreement of the numbers in rad.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Mar 2013
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    How do you put a navigation bar inside the popon?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    The popon is just a <div>. So you can put anything you want inside a <div>, as it's the most general container available in HTML.

    I don't think you have even tried to do this yet, am I correct?

    Don't be afraid to just try something. Often, that actually works.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    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
    •