1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need help with Javascript/CSS - Please Help

Discussion in 'General Programming Chat' started by SquirlyNutz, Feb 9, 2014.

  1. SquirlyNutz

    SquirlyNutz Power Member

    Joined:
    Feb 20, 2009
    Messages:
    671
    Likes Received:
    495
    Location:
    Toronto
    I am trying to create 2 onclick popup links on the same website page and cannot seem to figure it out.


    http://jsfiddle.net/WGPhG/7/


    I have created 2 different classes in CSS with different positions although both links that i click always seems to open in the same position.

    Please help i have spent 6-7 hours on this today.
     
  2. CodeNinja

    CodeNinja Newbie

    Joined:
    Sep 25, 2013
    Messages:
    47
    Likes Received:
    26
    I do not understand what exactly is your problem.

    If I click the button a 'popup' appears. If I click the red close square the 'popup' closes.
     
  3. SquirlyNutz

    SquirlyNutz Power Member

    Joined:
    Feb 20, 2009
    Messages:
    671
    Likes Received:
    495
    Location:
    Toronto
    Ok i have a link at the top of my page and works fine,the popup box appears although when i click on my 2nd link which is in the middle of the website page, the popup box appears at the top - same position where link1 popsup.

    For example, i have created in my stylesheet 2 classes:

    .popup1{
    position:absolute;
    top:500px;
    left:500px;

    .popup2{
    position:absolute;
    top:800px;
    left:800px;


    and when i call these classes from 2 links the popup window always appears at the top when clicking both links.

     
    Last edited: Feb 9, 2014
  4. solventnine

    solventnine Junior Member

    Joined:
    Dec 4, 2009
    Messages:
    113
    Likes Received:
    16
    Try this:

    Change
    Code:
    <style type="css">
         .popup1{
               position: absolute;
               top: 500px;
               left: 500px;
         }
    
         .popup2{
               position: absolute;
               top: 800px;
               left: 800px;
         }
    </style>
    
    to

    Code:
    <style type="css">
         #popup1{
               position: absolute;
               top: 500px;
               left: 500px;
         }
    
         #popup2{
               position: absolute;
               top: 800px;
               left: 800px;
         }
    </style>
    
    and

    Code:
    <div id="test" class="popup1">
    to
    Code:
    <div id="popup1">