超链接不在弹出窗口上工作

时间:2013-07-09 21:55:05

标签: javascript css popup popupwindow

我在这里有一个网站。

一旦加载页面,就会出现一个弹出窗口。但是,我无法在HTML内容中使用链接。

这是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>

当您查看弹出窗口时,您会看到我的所有链接都分组在弹出窗口的右上角,并带有“X”。

这是弹出窗口的CSS ...

#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}

我认为它位于'#popUpDiv a'部分,但我不确定如何解决它。

有什么想法吗?

编辑:这是jsfiddle

在第二颗子弹上,你会看到“点击查看!”什么时候应该“点击这里来查看它!”

在第3个子弹上,你会看到“点击”,它应该是“点击这里。”

但是,由于某种原因,所有链接都被捆绑在右上角。

1 个答案:

答案 0 :(得分:0)

不是将样式应用于a,而是创建样式类并将其应用于popUpDiv。像这样......

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

并将其应用于popup href ...

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

jsFiddle DEMO here

希望这有帮助!