Hyperlink not working on popup

Question

I have a website Here.

There's a pop up window that appears as soon as the page is loaded. However, I'm unable to utilize links in the HTML content.

Here's the HTML...

<body onload="popup('popUpDiv')">

<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">

<a href="#" onclick="popup('popUpDiv')" ><img src="images/x.png" /></a>
        <br />
    <h3 style="color: #FFF; padding-left: 10px;">Updates to the AR Toolbox</h3>
            <br />
                <br />
                <div style="width: 350px; height: 300px; text-align: left;">
                <p style="padding-left: 50px; color: #000;">• Check out the new rotating Announcement Board on the AR Toolbox!</p>
                    <br />
                <p style="padding-left: 50px; color: #000;">• Have you seen the new SUO Tour yet? Click <a href="#" target="_blank">here</a> to check it out!</p>                
                    <br />
                <p style="padding-left: 50px; color: #000;">• South University and The Education Foundation Scholarship Committee are now on SharePoint. Click <a href="#" target="_blank"> here!</a></p>
                    <br />
        </div>
</div>

When you look at the popup, you'll see all my links are grouped in the upper right corner of the popup window, with the 'X'.

Here's the CSS for the Popup...

#blanket {
   background-color:#111;
   opacity: 0.65;
   filter: alpha(opacity=65)
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}

#popUpDiv {
    position:absolute;
    background-color: #fff;
    background-image:url(../images/popup_bg.png);
    background-repeat:no-repeat;    
    width:400px;
    height:400px;
    border:5px solid #000;
    z-index: 9002;
}


#popUpDiv a {
    background-image: url(../images/x.png); 
    background-repeat: no-repeat;
    position:absolute; top:10px; right:10px}

I think it lies in the '#popUpDiv a' section, but I'm not sure how to fix it.

Any ideas?

Edit: Here is the jsfiddle

On the 2nd bullet, you'll see "Click to check it out!" when it should be "Click here to check it out!"

On the 3rd bullet, you'll see "Click", when it should be "Click here ."

But, again, all the the links are bundled up in the top right-hand corner for some reason.

Answer 1

Instead of applying the style to a , just create a style class and apply that to the popUpDiv . Like this...

#popUpDiv .close {
    background-image: url(../images/x.png); 
    background-repeat: no-repeat;
    position:absolute; 
    top:10px; 
    right:10px
}

and apply it to the popup href ...

<a href="#" onclick="popup('popUpDiv')" class="close"><img src="images/x.png" /></a>

jsFiddle DEMO here

Hope this helps!

Hyperlink not working on popup

Question

1 answers

solution1
0 ACCPTED 2013-07-10 00:53:38

Hyperlink not working on popup

Question

1 answers

solution1 0 ACCPTED 2013-07-10 00:53:38

solution1
0 ACCPTED 2013-07-10 00:53:38