我在这里有一个网站。
一旦加载页面,就会出现一个弹出窗口。但是,我无法在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个子弹上,你会看到“点击”,它应该是“点击这里。”
但是,由于某种原因,所有链接都被捆绑在右上角。
答案 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>
希望这有帮助!